Pastel Sphere Chaos

Okay, here's a setup for a simple physics-based game with pastel-colored spheres, inspired by the chaotic fun of Goat Simulator. This uses the Rapier physics engine for interactions. Pastel Sphere Chaos

Use WASD/Arrow Keys to move, Space to jump

body { margin: 0; overflow: hidden; background-color: #f0f0f0; font-family: sans-serif; } canvas { display: block; } #info { position: absolute; top: 10px; width: 100%; text-align: center; color: #555; z-index: 100; display:block; } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import RAPIER from '@dimforge/rapier3d-compat'; import { initPhysics, createPhysicsObject, getPhysicsObjects, stepPhysicsWorld } from './physics.js'; import { createPlayer, playerControls } from './player.js'; import { createEnvironment } from './environment.js'; let scene, camera, renderer, controls; let physicsWorld; let playerSphere, playerBody; const clock = new THREE.Clock(); const keys = {}; // Keep track of pressed keys async function init() { // Basic Three.js setup scene = new THREE.Scene(); scene.background = new THREE.Color(0x pastel); // Pastel background camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 5, 15); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; // Enable shadows document.body.appendChild(renderer.domElement); // OrbitControls for camera manipulation controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.target.set(0, 1, 0); // Look slightly higher // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7.5); directionalLight.castShadow = true; // Enable shadow casting directionalLight.shadow.mapSize.width = 1024; directionalLight.shadow.mapSize.height = 1024; scene.add(directionalLight); // Initialize Physics await RAPIER.init(); physicsWorld = initPhysics(); // Create Game Elements createEnvironment(scene, physicsWorld); const playerResult = createPlayer(scene, physicsWorld); playerSphere = playerResult.mesh; playerBody = playerResult.body; // Add some random spheres const sphereGeometry = new THREE.SphereGeometry(0.5, 16, 16); const pastelColors = [0xffb3ba, 0xffdfba, 0xffffba, 0xbaffc9, 0xbae1ff]; for (let i = 0; i < 15; i++) { const color = pastelColors[Math.floor(Math.random() * pastelColors.length)]; const material = new THREE.MeshStandardMaterial({ color: color, roughness: 0.5, metalness: 0.1 }); const mesh = new THREE.Mesh(sphereGeometry, material); mesh.castShadow = true; mesh.receiveShadow = true; const position = new THREE.Vector3( (Math.random() - 0.5) * 20, Math.random() * 5 + 2, (Math.random() - 0.5) * 20 ); const bodyDesc = RAPIER.RigidBodyDesc.dynamic().setTranslation(position.x, position.y, position.z); const colliderDesc = RAPIER.ColliderDesc.ball(0.5).setRestitution(0.7).setDensity(1.0); createPhysicsObject(scene, physicsWorld, mesh, bodyDesc, colliderDesc); } // Event Listeners window.addEventListener('resize', onWindowResize); document.addEventListener('keydown', (event) => { keys[event.code] = true; }); document.addEventListener('keyup', (event) => { keys[event.code] = false; }); // Start animation loop animate(); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); const deltaTime = clock.getDelta(); // Handle Player Movement playerControls(playerBody, keys, camera); // Step Physics Simulation stepPhysicsWorld(deltaTime); // Update Three.js objects from physics simulation const physicsObjects = getPhysicsObjects(); physicsObjects.forEach(obj => { const position = obj.body.translation(); const rotation = obj.body.rotation(); obj.mesh.position.set(position.x, position.y, position.z); obj.mesh.quaternion.set(rotation.x, rotation.y, rotation.z, rotation.w); }); // Keep camera focused near the player const playerPos = playerSphere.position; controls.target.lerp(playerPos, 0.1); // Smoothly follow player controls.update(); // Required if enableDamping is true renderer.render(scene, camera); } init().catch(error => console.error("Initialization failed:", error)); import RAPIER from '@dimforge/rapier3d-compat'; import * as THREE from 'three'; let world; const physicsObjects = []; // To map Rapier bodies to Three.js meshes export function initPhysics() { const gravity = { x: 0.0, y: -9.81, z: 0.0 }; world = new RAPIER.World(gravity); return world; } export function createPhysicsObject(scene, physicsWorld, mesh, bodyDesc, colliderDesc) { const body = physicsWorld.createRigidBody(bodyDesc); const collider = physicsWorld.createCollider(colliderDesc, body); // Store mesh and body together const physicsObject = { mesh, body, collider }; physicsObjects.push(physicsObject); // Add mesh to the scene scene.add(mesh); return physicsObject; } export function getPhysicsObjects() { return physicsObjects; } export function stepPhysicsWorld(deltaTime) { // Using a fixed timestep is generally recommended for stability const fixedTimeStep = 1.0 / 60.0; // 60 FPS const maxSubSteps = 10; // Avoid spiral of death let internalDeltaTime = deltaTime; // Simple fixed timestep loop for (let i = 0; i < maxSubSteps && internalDeltaTime > fixedTimeStep; ++i) { world.timestep = fixedTimeStep; world.step(); internalDeltaTime -= fixedTimeStep; } // Step any remaining time if (internalDeltaTime > 0.0) { world.timestep = internalDeltaTime; world.step(); } } import * as THREE from 'three'; import RAPIER from '@dimforge/rapier3d-compat'; import { createPhysicsObject } from './physics.js'; const PLAYER_RADIUS = 0.75; const MOVE_FORCE = 50; const JUMP_FORCE = 250; const MAX_VELOCITY = 10; const DAMPING_FACTOR = 0.98; // Apply damping to simulate air resistance/friction let canJump = true; // Simple jump state export function createPlayer(scene, physicsWorld) { const geometry = new THREE.SphereGeometry(PLAYER_RADIUS, 32, 32); // Unique player color (e.g., light purple) const material = new THREE.MeshStandardMaterial({ color: 0xd8baff, roughness: 0.4, metalness: 0.1 }); const mesh = new THREE.Mesh(geometry, material); mesh.castShadow = true; mesh.position.y = PLAYER_RADIUS + 1; // Start slightly above ground const bodyDesc = RAPIER.RigidBodyDesc.dynamic() .setTranslation(mesh.position.x, mesh.position.y, mesh.position.z) .setLinearDamping(0.5) // Rapier's damping for linear velocity .setAngularDamping(0.5); // Rapier's damping for angular velocity (less rolling) const colliderDesc = RAPIER.ColliderDesc.ball(PLAYER_RADIUS) .setRestitution(0.2) // Less bouncy .setDensity(1.5) .setActiveEvents(RAPIER.ActiveEvents.COLLISION_EVENTS); // Needed for jump reset const { body, collider } = createPhysicsObject(scene, physicsWorld, mesh, bodyDesc, colliderDesc); // Detect collisions to reset jump state physicsWorld.intersectionsWith(collider, (otherCollider) => { // Basic ground check - assumes ground is static or has low Y normal // A more robust check would involve raycasting downwards if (otherCollider.parent()?.isFixed()) { // Simple check if colliding with a fixed body (like the ground) canJump = true; } // You might need a more sophisticated check depending on your ground geometry }); return { mesh, body }; } export function playerControls(playerBody, keys, camera) { const impulse = { x: 0, y: 0, z: 0 }; const currentVelocity = playerBody.linvel(); // Get camera direction (ignore Y component for planar movement) const cameraDirection = new THREE.Vector3(); camera.getWorldDirection(cameraDirection); cameraDirection.y = 0; cameraDirection.normalize(); const rightDirection = new THREE.Vector3().crossVectors(camera.up, cameraDirection).normalize(); // Forward/Backward movement based on camera view if (keys['KeyW'] || keys['ArrowUp']) { impulse.x += cameraDirection.x * MOVE_FORCE; impulse.z += cameraDirection.z * MOVE_FORCE; } if (keys['KeyS'] || keys['ArrowDown']) { impulse.x -= cameraDirection.x * MOVE_FORCE; impulse.z -= cameraDirection.z * MOVE_FORCE; } // Left/Right movement based on camera view if (keys['KeyA'] || keys['ArrowLeft']) { impulse.x += rightDirection.x * MOVE_FORCE; impulse.z += rightDirection.z * MOVE_FORCE; } if (keys['KeyD'] || keys['ArrowRight']) { impulse.x -= rightDirection.x * MOVE_FORCE; impulse.z -= rightDirection.z * MOVE_FORCE; } // Apply movement impulse if (impulse.x !== 0 || impulse.z !== 0) { // Limit horizontal speed const horizontalVelocity = Math.sqrt(currentVelocity.x * currentVelocity.x + currentVelocity.z * currentVelocity.z); if (horizontalVelocity < MAX_VELOCITY) { playerBody.applyImpulse(impulse, true); } } // Jump if ((keys['Space']) && canJump) { // Check if mostly grounded (low vertical velocity) if (Math.abs(currentVelocity.y) < 0.5) { playerBody.applyImpulse({ x: 0, y: JUMP_FORCE, z: 0 }, true); canJump = false; // Prevent double jumps in the air } } // Apply manual damping if not moving horizontally to simulate friction if (!(keys['KeyW'] || keys['ArrowUp'] || keys['KeyS'] || keys['ArrowDown'] || keys['KeyA'] || keys['ArrowLeft'] || keys['KeyD'] || keys['ArrowRight'])) { playerBody.setLinvel({ x: currentVelocity.x * DAMPING_FACTOR, y: currentVelocity.y, z: currentVelocity.z * DAMPING_FACTOR }, true); } } import * RAPIER from '@dimforge/rapier3d-compat'; import * as THREE from 'three'; import { createPhysicsObject } from './physics.js'; export function createEnvironment(scene, physicsWorld) { // Ground Plane const groundSize = 50; const groundGeometry = new THREE.PlaneGeometry(groundSize, groundSize); // Pastel green ground const groundMaterial = new THREE.MeshStandardMaterial({ color: 0xc1ffc1, side: THREE.DoubleSide, roughness: 0.8 }); const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial); groundMesh.rotation.x = -Math.PI / 2; // Rotate flat groundMesh.receiveShadow = true; // Allow shadows on the ground // No need to add to physicsObjects array if static const groundBodyDesc = RAPIER.RigidBodyDesc.fixed().setTranslation(0, 0, 0); // Position at origin const groundColliderDesc = RAPIER.ColliderDesc.cuboid(groundSize / 2, 0.1, groundSize / 2); // Thin cuboid collider // Create physics body for ground but don't store it in the dynamic list const groundBody = physicsWorld.createRigidBody(groundBodyDesc); physicsWorld.createCollider(groundColliderDesc, groundBody); scene.add(groundMesh); // Add mesh to scene directly // Add some simple static sphere obstacles const obstacleGeometry = new THREE.SphereGeometry(2, 16, 16); const obstacleMaterial = new THREE.MeshStandardMaterial({ color: 0xffd1dc, roughness: 0.6 }); // Pastel pink const positions = [ new THREE.Vector3(10, 1, 5), new THREE.Vector3(-8, 1, -10), new THREE.Vector3(5, 1, -15), ]; positions.forEach(pos => { const obstacleMesh = new THREE.Mesh(obstacleGeometry, obstacleMaterial); obstacleMesh.position.copy(pos); obstacleMesh.castShadow = true; obstacleMesh.receiveShadow = true; const obstacleBodyDesc = RAPIER.RigidBodyDesc.fixed().setTranslation(pos.x, pos.y, pos.z); const obstacleColliderDesc = RAPIER.ColliderDesc.ball(2); // Radius 2 // Create static physics object const obstacleBody = physicsWorld.createRigidBody(obstacleBodyDesc); physicsWorld.createCollider(obstacleColliderDesc, obstacleBody); scene.add(obstacleMesh); }); }