Interactive 3D Multiplayer World

Controls

WASD - Move

Mouse - Look around

Space - Jump

Players

import * as THREE from 'three'; import { World } from './world.js'; import { Player } from './player.js'; import { InputController } from './input-controller.js'; import { PlayerManager } from './player-manager.js'; class Game { constructor() { this.initialize(); } initialize() { // Create renderer this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(this.renderer.domElement); // Create scene this.scene = new THREE.Scene(); this.scene.background = new THREE.Color(0x87CEEB); // Sky blue this.scene.fog = new THREE.FogExp2(0x87CEEB, 0.01); // Create camera this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); this.camera.position.set(0, 5, 10); // Create world this.world = new World(this.scene); // Create input controller this.inputController = new InputController(); // Create player this.player = new Player(this.scene, this.camera, this.world); // Create player manager for multiplayer this.playerManager = new PlayerManager(this.scene, this.world); this.playerManager.addDummyPlayers(5); // Add some dummy players for demonstration // Handle window resize window.addEventListener('resize', () => this.onWindowResize(), false); // Start animation loop this.animate(); } onWindowResize() { this.camera.aspect = window.innerWidth / window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(window.innerWidth, window.innerHeight); } animate() { requestAnimationFrame(() => this.animate()); const deltaTime = Math.min(0.05, this.clock ? (Date.now() - this.clock) / 1000 : 0); this.clock = Date.now(); // Update player this.player.update(deltaTime, this.inputController); // Update other players this.playerManager.update(deltaTime); // Update world this.world.update(deltaTime); // Render scene this.renderer.render(this.scene, this.camera); } } // Start the game new Game(); import * as THREE from 'three'; import { SimplexNoise } from 'three/addons/math/SimplexNoise.js'; import { Water } from 'three/addons/objects/Water.js'; import { Sky } from 'three/addons/objects/Sky.js'; export class World { constructor(scene) { this.scene = scene; this.objects = []; this.colliders = []; this.createLights(); this.createSky(); this.createTerrain(); this.createWater(); this.createTrees(); } createLights() { // Ambient light const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); this.scene.add(ambientLight); // Directional light (sun) const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(100, 100, 50); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 500; directionalLight.shadow.camera.left = -100; directionalLight.shadow.camera.right = 100; directionalLight.shadow.camera.top = 100; directionalLight.shadow.camera.bottom = -100; this.scene.add(directionalLight); this.sun = directionalLight; } createSky() { // Sky this.sky = new Sky(); this.sky.scale.setScalar(10000); this.scene.add(this.sky); const skyUniforms = this.sky.material.uniforms; skyUniforms['turbidity'].value = 10; skyUniforms['rayleigh'].value = 2; skyUniforms['mieCoefficient'].value = 0.005; skyUniforms['mieDirectionalG'].value = 0.8; const parameters = { elevation: 2, azimuth: 180 }; const phi = THREE.MathUtils.degToRad(90 - parameters.elevation); const theta = THREE.MathUtils.degToRad(parameters.azimuth); this.sun.position.setFromSphericalCoords(1, phi, theta); skyUniforms['sunPosition'].value.copy(this.sun.position); } createTerrain() { const size = 200; const resolution = 128; const geometry = new THREE.PlaneGeometry(size, size, resolution - 1, resolution - 1); geometry.rotateX(-Math.PI / 2); // Generate terrain height using SimplexNoise const noise = new SimplexNoise(); const vertices = geometry.attributes.position.array; // Create height map this.heightMap = new Float32Array(resolution * resolution); for (let i = 0, j = 0; i < vertices.length; i += 3, j++) { const x = vertices[i]; const z = vertices[i + 2]; // Multiple layers of noise for more natural terrain let height = 0; height += 10 * noise.noise(x / 100, z / 100); height += 5 * noise.noise(x / 50, z / 50); height += 2 * noise.noise(x / 20, z / 20); height += 1 * noise.noise(x / 10, z / 10); // Mountains in certain areas const distanceFromCenter = Math.sqrt(x * x + z * z); if (distanceFromCenter > 50 && distanceFromCenter < 80) { height += 15 * Math.pow(noise.noise(x / 30, z / 30), 2); } // Flatten areas for water if (height < 0) { height = height * 0.5; } vertices[i + 1] = height; this.heightMap[j] = height; } // Update normals for proper lighting geometry.computeVertexNormals(); // Create material with different colors based on height const material = new THREE.MeshStandardMaterial({ vertexColors: true, flatShading: false }); // Set vertex colors based on height const colors = []; for (let i = 0; i < vertices.length; i += 3) { const height = vertices[i + 1]; let color = new THREE.Color(); if (height < -1) { // Deep water areas (not visible but for completeness) color.setRGB(0.1, 0.2, 0.5); } else if (height < 0) { // Shallow water areas (not visible but for completeness) color.setRGB(0.2, 0.4, 0.6); } else if (height < 1) { // Sand color.setRGB(0.9, 0.8, 0.6); } else if (height < 5) { // Grass color.setRGB(0.2, 0.6, 0.2); } else if (height < 10) { // Forest color.setRGB(0.1, 0.4, 0.1); } else { // Mountain const t = Math.min((height - 10) / 10, 1); color.setRGB(0.5 + 0.5 * t, 0.5 + 0.5 * t, 0.5 + 0.5 * t); } colors.push(color.r, color.g, color.b); } geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); // Create mesh this.terrain = new THREE.Mesh(geometry, material); this.terrain.receiveShadow = true; this.scene.add(this.terrain); this.colliders.push(this.terrain); // Store terrain data for collision detection this.terrainSize = size; this.terrainResolution = resolution; } createWater() { const waterGeometry = new THREE.PlaneGeometry(this.terrainSize, this.terrainSize); this.water = new Water( waterGeometry, { textureWidth: 512, textureHeight: 512, waterNormals: new THREE.TextureLoader().load('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/waternormals.jpg', function(texture) { texture.wrapS = texture.wrapT = THREE.RepeatWrapping; }), sunDirection: new THREE.Vector3(), sunColor: 0xffffff, waterColor: 0x001e0f, distortionScale: 3.7, fog: this.scene.fog !== undefined } ); this.water.rotation.x = -Math.PI / 2; this.water.position.y = -0.5; // Water level this.scene.add(this.water); } createTrees() { // Create tree instances for performance const treeCount = 100; // Simple tree model const trunkGeometry = new THREE.CylinderGeometry(0.2, 0.3, 1.5, 8); const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); trunk.castShadow = true; trunk.receiveShadow = true; const leavesGeometry = new THREE.ConeGeometry(1, 2, 8); const leavesMaterial = new THREE.MeshStandardMaterial({ color: 0x2E8B57 }); const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial); leaves.position.y = 1.5; leaves.castShadow = true; leaves.receiveShadow = true; const treeGroup = new THREE.Group(); treeGroup.add(trunk); treeGroup.add(leaves); // Place trees based on terrain height const noise = new SimplexNoise(); for (let i = 0; i < treeCount; i++) { // Random position within terrain bounds const x = (Math.random() - 0.5) * this.terrainSize; const z = (Math.random() - 0.5) * this.terrainSize; // Get height at this position const height = this.getHeightAt(x, z); // Only place trees on appropriate terrain (not too steep, not in water) if (height > 1 && height < 8) { // Use noise to create natural-looking tree distribution const noiseValue = noise.noise(x / 20, z / 20); if (noiseValue > 0.2) { const tree = treeGroup.clone(); tree.position.set(x, height, z); // Random rotation and scale tree.rotation.y = Math.random() * Math.PI * 2; const scale = 0.8 + Math.random() * 0.4; tree.scale.set(scale, scale, scale); this.scene.add(tree); this.objects.push(tree); } } } } getHeightAt(x, z) { // Convert world coordinates to terrain coordinates const terrainHalfSize = this.terrainSize / 2; const tx = ((x + terrainHalfSize) / this.terrainSize) * (this.terrainResolution - 1); const tz = ((z + terrainHalfSize) / this.terrainSize) * (this.terrainResolution - 1); // Get the four surrounding vertices const x1 = Math.floor(tx); const z1 = Math.floor(tz); const x2 = Math.min(x1 + 1, this.terrainResolution - 1); const z2 = Math.min(z1 + 1, this.terrainResolution - 1); // Get the heights at the four vertices const h00 = this.heightMap[z1 * this.terrainResolution + x1] || 0; const h10 = this.heightMap[z1 * this.terrainResolution + x2] || 0; const h01 = this.heightMap[z2 * this.terrainResolution + x1] || 0; const h11 = this.heightMap[z2 * this.terrainResolution + x2] || 0; // Bilinear interpolation const fx = tx - x1; const fz = tz - z1; const h0 = h00 * (1 - fx) + h10 * fx; const h1 = h01 * (1 - fx) + h11 * fx; return h0 * (1 - fz) + h1 * fz; } update(deltaTime) { // Update water if (this.water) { this.water.material.uniforms['time'].value += deltaTime; } } } import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; export class Player { constructor(scene, camera, world) { this.scene = scene; this.camera = camera; this.world = world; // Player properties this.moveSpeed = 10; this.jumpForce = 10; this.gravity = 20; // Player state this.velocity = new THREE.Vector3(); this.position = new THREE.Vector3(0, 5, 0); this.isOnGround = false; // Player model this.createPlayerModel(); // Setup controls this.setupControls(); } createPlayerModel() { // Create a simple player model (visible to other players) const geometry = new THREE.CapsuleGeometry(0.5, 1, 4, 8); const material = new THREE.MeshLambertMaterial({ color: 0xff0000 }); this.model = new THREE.Mesh(geometry, material); this.model.castShadow = true; this.model.position.copy(this.position); this.scene.add(this.model); // Create a collision capsule this.collider = new THREE.Object3D(); this.collider.position.copy(this.position); this.scene.add(this.collider); // Set camera position relative to player this.updateCamera(); } setupControls() { // Setup pointer lock controls this.controls = new PointerLockControls(this.camera, document.body); // Add click event to lock controls document.addEventListener('click', () => { this.controls.lock(); }); // Add event listeners for pointer lock changes this.controls.addEventListener('lock', () => { console.log('Controls locked'); }); this.controls.addEventListener('unlock', () => { console.log('Controls unlocked'); }); } update(deltaTime, inputController) { if (!deltaTime) return; // Apply gravity this.velocity.y -= this.gravity * deltaTime; // Get movement input if (this.controls.isLocked) { // Calculate movement direction const moveDirection = new THREE.Vector3(); if (inputController.keys.forward) moveDirection.z -= 1; if (inputController.keys.backward) moveDirection.z += 1; if (inputController.keys.left) moveDirection.x -= 1; if (inputController.keys.right) moveDirection.x += 1; if (moveDirection.length() > 0) { moveDirection.normalize(); // Get the camera's direction const cameraDirection = new THREE.Vector3(); this.camera.getWorldDirection(cameraDirection); cameraDirection.y = 0; cameraDirection.normalize(); // Calculate forward and right vectors const forward = cameraDirection; const right = new THREE.Vector3(); right.crossVectors(new THREE.Vector3(0, 1, 0), forward).normalize(); // Apply movement in camera direction const moveX = moveDirection.x * right.x + moveDirection.z * forward.x; const moveZ = moveDirection.x * right.z + moveDirection.z * forward.z; this.velocity.x = moveX * this.moveSpeed; this.velocity.z = moveZ * this.moveSpeed; } else { // Apply friction this.velocity.x *= 0.9; this.velocity.z *= 0.9; } // Jump if (inputController.keys.jump && this.isOnGround) { this.velocity.y = this.jumpForce; this.isOnGround = false; } } // Apply velocity const deltaPosition = this.velocity.clone().multiplyScalar(deltaTime); this.position.add(deltaPosition); // Terrain collision const terrainHeight = this.world.getHeightAt(this.position.x, this.position.z); const playerHeight = 1.7; // Player height from feet to eyes if (this.position.y - playerHeight / 2 < terrainHeight) { this.position.y = terrainHeight + playerHeight / 2; this.velocity.y = 0; this.isOnGround = true; } else { // Small threshold to allow walking on slightly uneven terrain if (this.position.y - playerHeight / 2 - terrainHeight < 0.1) { this.isOnGround = true; } else { this.isOnGround = false; } } // Water collision if (this.position.y - playerHeight / 2 < -0.5) { // Water level // Apply water resistance this.velocity.multiplyScalar(0.95); // Buoyancy if (this.velocity.y < 0) { this.velocity.y *= 0.5; } } // Update player model and collider this.model.position.copy(this.position); this.collider.position.copy(this.position); // Update camera position this.updateCamera(); } updateCamera() { // Position the camera at player's eye level this.controls.getObject().position.copy(this.position); } } export class InputController { constructor() { this.keys = { forward: false, backward: false, left: false, right: false, jump: false }; this.mouse = { x: 0, y: 0 }; this.setupEventListeners(); } setupEventListeners() { // Keyboard events document.addEventListener('keydown', (event) => this.onKeyDown(event), false); document.addEventListener('keyup', (event) => this.onKeyUp(event), false); // Mouse events document.addEventListener('mousemove', (event) => this.onMouseMove(event), false); } onKeyDown(event) { switch (event.code) { case 'KeyW': case 'ArrowUp': this.keys.forward = true; break; case 'KeyS': case 'ArrowDown': this.keys.backward = true; break; case 'KeyA': case 'ArrowLeft': this.keys.left = true; break; case 'KeyD': case 'ArrowRight': this.keys.right = true; break; case 'Space': this.keys.jump = true; break; } } onKeyUp(event) { switch (event.code) { case 'KeyW': case 'ArrowUp': this.keys.forward = false; break; case 'KeyS': case 'ArrowDown': this.keys.backward = false; break; case 'KeyA': case 'ArrowLeft': this.keys.left = false; break; case 'KeyD': case 'ArrowRight': this.keys.right = false; break; case 'Space': this.keys.jump = false; break; } } onMouseMove(event) { this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1; this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; } } import * as THREE from 'three'; export class PlayerManager { constructor(scene, world) { this.scene = scene; this.world = world; this.players = []; this.playerList = document.getElementById('player-list'); } addDummyPlayers(count) { const names = ['Alice', 'Bob', 'Charlie', 'Dave', 'Eve', 'Frank', 'Grace', 'Heidi']; const colors = [0x0000ff, 0x00ff00, 0xffff00, 0xff00ff, 0x00ffff, 0xff8000, 0x8000ff, 0x0080ff]; for (let i = 0; i < count; i++) { const name = names[i % names.length]; const color = colors[i % colors.length]; // Create random position on terrain const x = (Math.random() - 0.5) * 100; const z = (Math.random() - 0.5) * 100; const y = this.world.getHeightAt(x, z) + 1; this.addPlayer({ id: `player-${i}`, name: name, position: new THREE.Vector3(x, y, z), color: color }); } this.updatePlayerList(); } addPlayer(playerData) { // Create player model const geometry = new THREE.CapsuleGeometry(0.5, 1, 4, 8); const material = new THREE.MeshLambertMaterial({ color: playerData.color }); const model = new THREE.Mesh(geometry, material); model.castShadow = true; model.position.copy(playerData.position); this.scene.add(model); // Create player name tag const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = 256; canvas.height = 64; context.fillStyle = '#ffffff'; context.font = '24px Arial'; context.textAlign = 'center'; context.fillText(playerData.name, 128, 24); const texture = new THREE.CanvasTexture(canvas); const spriteMaterial = new THREE.SpriteMaterial({ map: texture }); const sprite = new THREE.Sprite(spriteMaterial); sprite.position.set(0, 1.5, 0); sprite.scale.set(2, 0.5, 1); model.add(sprite); // Add player to list this.players.push({ id: playerData.id, name: playerData.name, model: model, position: playerData.position, velocity: new THREE.Vector3(), targetPosition: playerData.position.clone(), moveTime: 0 }); } updatePlayerList() { this.playerList.innerHTML = ''; this.players.forEach(player => { const playerElement = document.createElement('div'); playerElement.textContent = player.name; this.playerList.appendChild(playerElement); }); } update(deltaTime) { // Update all players this.players.forEach(player => { // For dummy players, create random movement if (Math.random() < 0.01) { const randomDirection = new THREE.Vector3( (Math.random() - 0.5) * 2, 0, (Math.random() - 0.5) * 2 ).normalize(); const distance = 5 + Math.random() * 10; player.targetPosition = player.position.clone().add( randomDirection.multiplyScalar(distance) ); player.moveTime = 2 + Math.random() * 3; } // Move towards target position if (player.moveTime > 0) { player.moveTime -= deltaTime; // Calculate direction and distance const direction = new THREE.Vector3().subVectors( player.targetPosition, player.position ); const distance = direction.length(); if (distance > 0.1) { // Move towards target direction.normalize(); const moveSpeed = 5; const moveAmount = Math.min(moveSpeed * deltaTime, distance); player.position.add(direction.multiplyScalar(moveAmount)); // Apply terrain height const terrainHeight = this.world.getHeightAt(player.position.x, player.position.z); player.position.y = terrainHeight + 1; // Update model position player.model.position.copy(player.position); // Rotate model to face movement direction if (direction.length() > 0.1) { player.model.rotation.y = Math.atan2(direction.x, direction.z); } } } }); } } I've created an interactive 3D multiplayer world with terrain, rivers, mountains, and player movement. The world features: 1. Procedurally generated terrain with mountains, grass, and sand 2. Water simulation for rivers 3. Trees scattered across the landscape 4. First-person player controls (WASD to move, mouse to look, space to jump) 5. Simulated multiplayer with AI-controlled players that move around To run this project, simply open the index.html file in a browser. Click anywhere on the screen to enable mouse controls.