import * as THREE from 'three'; import { NPC } from 'NPC'; import { Crab } from 'Crab'; import { Squid } from 'Squid'; const SHARED_GEOMETRIES = { block: new THREE.BoxGeometry(1, 1, 1), waterPlane: new THREE.PlaneGeometry(1, 1, 32, 32), grass: new THREE.PlaneGeometry(0.5, 0.5), flower: new THREE.PlaneGeometry(0.3, 0.3), treeLeaves: new THREE.SphereGeometry(1, 8, 8), treeTrunk: new THREE.CylinderGeometry(0.2, 0.3, 2, 8) }; const VEGETATION_MATERIALS = { grass: new THREE.MeshStandardMaterial({ color: 0x4CAF50, side: THREE.DoubleSide, transparent: true, alphaTest: 0.5 }), flower: new THREE.MeshStandardMaterial({ color: 0xFFEB3B, side: THREE.DoubleSide, transparent: true, alphaTest: 0.5 }), treeLeaves: new THREE.MeshStandardMaterial({ color: 0x2E7D32, roughness: 0.8 }), treeTrunk: new THREE.MeshStandardMaterial({ color: 0x4E342E, roughness: 0.9 }) }; export class ThreeScene { constructor(mountRef) { this.mountRef = mountRef; this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); this.renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' }); // Basic settings this.CHUNK_SIZE = 16; this.RENDER_DISTANCE = 4; this.PLAYER_HEIGHT = 2.7; this.MOVE_SPEED = 0.2; this.ROTATION_SPEED = 0.02; this.GRAVITY = -0.015; this.JUMP_FORCE = 0.4; this.maxStepHeight = 1.5; // Maps this.chunks = new Map(); this.visibleChunks = new Set(); this.vegetation = new Map(); this.npcs = []; this.crabs = []; this.player = null; // Basic geometry this.blockGeometry = new THREE.BoxGeometry(1, 1, 1); this.waterMesh = null; // Movement this.keys = { forward: false, backward: false, left: false, right: false, jump: false }; this.velocity = new THREE.Vector3(); this.isGrounded = false; // Materials for blocks this.materials = null; this.titleElement = null; } // ---------------------------------------------------------------- // BLOCK MATERIALS // ---------------------------------------------------------------- createBlockMaterials() { const grassSide = new THREE.MeshStandardMaterial({ color: 0x785C39, roughness: 0.8, metalness: 0.1 }); const grassTop = new THREE.MeshStandardMaterial({ color: 0x3B7F25, roughness: 0.7 }); const dirt = new THREE.MeshStandardMaterial({ color: 0x65472B, roughness: 0.9 }); const stone = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.7, metalness: 0.2 }); const snow = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.3, metalness: 0.1 }); // 6-face array for a grass block this.materials = { grass: [grassSide, grassSide, grassTop, dirt, grassSide, grassSide], dirt: dirt, stone: stone, snow: snow }; } getChunkKey(cx, cz) { return `${cx},${cz}`; } generateChunk(chunkX, chunkZ) { const matrix = new THREE.Matrix4(); const instances = { grass: [], dirt: [], stone: [], snow: [] }; const startX = chunkX * this.CHUNK_SIZE; const startZ = chunkZ * this.CHUNK_SIZE; for (let x = 0; x < this.CHUNK_SIZE; x++) { for (let z = 0; z < this.CHUNK_SIZE; z++) { const worldX = startX + x; const worldZ = startZ + z; const baseHeight = Math.sin(worldX * 0.15) * 6 + Math.cos(worldZ * 0.15) * 6 + Math.sin((worldX + worldZ) * 0.1) * 3 + Math.cos(worldX * 0.08) * Math.sin(worldZ * 0.08) * 4; const maxHeight = Math.ceil(baseHeight); for (let y = -5; y <= maxHeight; y++) { let materialType; if (y === maxHeight) { if (y > 6) { materialType = 'snow'; } else if (y > -1) { materialType = 'grass'; } else { materialType = 'stone'; } } else if (y > maxHeight - 3 && y > -2) { materialType = 'dirt'; } else { materialType = 'stone'; } matrix.setPosition(worldX, y, worldZ); instances[materialType].push(matrix.clone()); } } } const chunkMeshes = {}; for (const [type, arr] of Object.entries(instances)) { if (arr.length > 0) { const instancedMesh = new THREE.InstancedMesh( this.blockGeometry, this.materials[type], arr.length ); for (let i = 0; i < arr.length; i++) { instancedMesh.setMatrixAt(i, arr[i]); } instancedMesh.instanceMatrix.needsUpdate = true; chunkMeshes[type] = instancedMesh; } } return chunkMeshes; } createTerrain() { this.createBlockMaterials(); for (let ring = 0; ring < this.RENDER_DISTANCE; ring++) { for (let side = 0; side < 4; side++) { for (let i = -ring; i <= ring; i++) { let chunkX, chunkZ; switch (side) { case 0: chunkX = ring; chunkZ = i; break; case 1: chunkX = -i; chunkZ = ring; break; case 2: chunkX = -ring; chunkZ = -i; break; case 3: chunkX = i; chunkZ = -ring; break; } const key = this.getChunkKey(chunkX, chunkZ); if (!this.chunks.has(key)) { const chunkMeshes = this.generateChunk(chunkX, chunkZ); this.chunks.set(key, chunkMeshes); Object.values(chunkMeshes).forEach(mesh => { this.scene.add(mesh); }); } } } } } createWater() { const waterSize = (this.RENDER_DISTANCE * 2 + 2) * this.CHUNK_SIZE * 2; const waterGeo = new THREE.PlaneGeometry(waterSize, waterSize, 32, 32); const waterMat = new THREE.MeshPhysicalMaterial({ color: 0x006994, transparent: true, opacity: 0.8, roughness: 0.1, metalness: 0.1, clearcoat: 0.8, clearcoatRoughness: 0.2, transmission: 0.4, ior: 1.3 }); this.waterMesh = new THREE.Mesh(waterGeo, waterMat); this.waterMesh.rotation.x = -Math.PI / 2; this.waterMesh.position.y = -0.5; this.scene.add(this.waterMesh); } createPlayer() { this.player = new THREE.Group(); const skinMat = new THREE.MeshPhongMaterial({ color: 0xffb6c1 }); const clothesMat = new THREE.MeshPhongMaterial({ color: 0x2e5a88 }); const shoeMat = new THREE.MeshPhongMaterial({ color: 0x4a4a4a }); // Torso const torso = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.6, 0.3), clothesMat); torso.position.y = 0.3; this.player.add(torso); // Head const head = new THREE.Mesh(new THREE.SphereGeometry(0.2, 12, 12), skinMat); head.position.y = 0.8; this.player.add(head); // Arms const armGeom = new THREE.BoxGeometry(0.15, 0.6, 0.15); const leftArm = new THREE.Mesh(armGeom, skinMat); leftArm.position.set(0.325, 0.3, 0); this.player.add(leftArm); const rightArm = new THREE.Mesh(armGeom, skinMat); rightArm.position.set(-0.325, 0.3, 0); this.player.add(rightArm); // Legs const legGeom = new THREE.BoxGeometry(0.15, 0.6, 0.15); const leftLeg = new THREE.Mesh(legGeom, clothesMat); leftLeg.position.set(0.15, -0.3, 0); this.player.add(leftLeg); const rightLeg = new THREE.Mesh(legGeom, clothesMat); rightLeg.position.set(-0.15, -0.3, 0); this.player.add(rightLeg); // Shoes const shoeGeom = new THREE.BoxGeometry(0.2, 0.1, 0.25); const leftShoe = new THREE.Mesh(shoeGeom, shoeMat); leftShoe.position.set(0.15, -0.65, 0.05); this.player.add(leftShoe); const rightShoe = new THREE.Mesh(shoeGeom, shoeMat); rightShoe.position.set(-0.15, -0.65, 0.05); this.player.add(rightShoe); // Neck const neckGeom = new THREE.CylinderGeometry(0.1, 0.12, 0.1, 8); const neck = new THREE.Mesh(neckGeom, skinMat); neck.position.y = 0.65; this.player.add(neck); this.player.scale.set(1.5, 1.5, 1.5); this.player.position.set(0, 10, 0); this.scene.add(this.player); } setupControls() { window.addEventListener('keydown', (e) => { switch(e.code) { case 'KeyW': this.keys.forward = true; break; case 'KeyS': this.keys.backward = true; break; case 'KeyA': this.keys.left = true; break; case 'KeyD': this.keys.right = true; break; case 'Space': this.keys.jump = true; break; } }); window.addEventListener('keyup', (e) => { switch(e.code) { case 'KeyW': this.keys.forward = false; break; case 'KeyS': this.keys.backward = false; break; case 'KeyA': this.keys.left = false; break; case 'KeyD': this.keys.right = false; break; case 'Space': this.keys.jump = false; break; } }); } getHeightAtPosition(x, z) { const wX = Math.floor(x); const wZ = Math.floor(z); const baseHeight = Math.sin(wX * 0.15) * 6 + Math.cos(wZ * 0.15) * 6 + Math.sin((wX + wZ) * 0.1) * 3 + Math.cos(wX * 0.08) * Math.sin(wZ * 0.08) * 4; return Math.ceil(baseHeight); } updatePlayer() { const isInConversation = this.npcs.some(n => n.isTalking); if (isInConversation) return; const isMoving = this.keys.forward || this.keys.backward; if (!this.playerLimbs) { this.playerLimbs = { leftArm: this.player.children.find(c => c.position.x > 0.3 && c.position.y === 0.3), rightArm: this.player.children.find(c => c.position.x < -0.3 && c.position.y === 0.3), leftLeg: this.player.children.find(c => c.position.x > 0.1 && c.position.y === -0.3), rightLeg: this.player.children.find(c => c.position.x < -0.1 && c.position.y === -0.3) }; } if (isMoving) { const time = Date.now() * 0.001 * 10; const amp = 0.4; this.playerLimbs.leftLeg.rotation.x = Math.sin(time) * amp; this.playerLimbs.rightLeg.rotation.x = Math.sin(time + Math.PI) * amp; this.playerLimbs.leftArm.rotation.x = Math.sin(time + Math.PI) * amp; this.playerLimbs.rightArm.rotation.x = Math.sin(time) * amp; } else { this.playerLimbs.leftLeg.rotation.x = 0; this.playerLimbs.rightLeg.rotation.x = 0; this.playerLimbs.leftArm.rotation.x = 0; this.playerLimbs.rightArm.rotation.x = 0; } this.velocity.y += this.GRAVITY; const currentH = this.getHeightAtPosition(this.player.position.x, this.player.position.z); let newX = this.player.position.x; let newZ = this.player.position.z; if (this.keys.forward) { newX += Math.sin(this.player.rotation.y) * this.MOVE_SPEED; newZ += Math.cos(this.player.rotation.y) * this.MOVE_SPEED; } if (this.keys.backward) { newX -= Math.sin(this.player.rotation.y) * this.MOVE_SPEED; newZ -= Math.cos(this.player.rotation.y) * this.MOVE_SPEED; } if (this.keys.left) { this.player.rotation.y += this.ROTATION_SPEED; } if (this.keys.right) { this.player.rotation.y -= this.ROTATION_SPEED; } const newPosH = this.getHeightAtPosition(newX, newZ); const heightDiff = newPosH - currentH; const canStep = heightDiff <= this.maxStepHeight; const isJumping = this.velocity.y > 0; if (heightDiff <= 0 || canStep || isJumping) { this.player.position.x = newX; this.player.position.z = newZ; } const heightAtPlayer = this.getHeightAtPosition( this.player.position.x, this.player.position.z ); if (this.player.position.y <= heightAtPlayer + this.PLAYER_HEIGHT) { this.player.position.y = heightAtPlayer + this.PLAYER_HEIGHT; this.velocity.y = 0; this.isGrounded = true; } else { this.isGrounded = false; } if (this.keys.jump && this.isGrounded) { const aheadX = this.player.position.x + Math.sin(this.player.rotation.y) * 2; const aheadZ = this.player.position.z + Math.cos(this.player.rotation.y) * 2; const hAhead = this.getHeightAtPosition(aheadX, aheadZ); const diffAhead = hAhead - heightAtPlayer; if (diffAhead > this.maxStepHeight) { this.velocity.y = this.JUMP_FORCE * 1.5; } else { this.velocity.y = this.JUMP_FORCE; } this.isGrounded = false; } this.player.position.y += this.velocity.y; const finalH = this.getHeightAtPosition( this.player.position.x, this.player.position.z ); if (this.player.position.y < finalH + this.PLAYER_HEIGHT) { this.player.position.y = finalH + this.PLAYER_HEIGHT; this.velocity.y = 0; this.isGrounded = true; } // Camera const camOffset = new THREE.Vector3(-10, 8, -10); camOffset.applyQuaternion(this.player.quaternion); this.camera.position.copy(this.player.position).add(camOffset); this.camera.lookAt(this.player.position); } createTitle() { this.titleElement = document.createElement('div'); this.titleElement.textContent = 'OceanWater.org'; this.titleElement.style.cssText = ` position: fixed; top: 20px; left: 50%; transform: translateX(-50%); font-size: 36px; font-weight: bold; color: #ffffff; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); z-index: 10000; pointer-events: none; font-family: 'Arial', sans-serif; `; document.body.appendChild(this.titleElement); } init() { this.renderer.setPixelRatio(window.devicePixelRatio); this.mountRef.current.appendChild(this.renderer.domElement); // Canvas behind all HTML this.renderer.domElement.style.position = 'absolute'; this.renderer.domElement.style.top = '0'; this.renderer.domElement.style.left = '0'; this.renderer.domElement.style.zIndex = '-1'; this.renderer.domElement.style.pointerEvents = 'none'; this.handleResize(); window.addEventListener('resize', this.handleResize.bind(this)); const skyColor = new THREE.Color(0x88c6e5); this.scene.background = skyColor; this.scene.fog = new THREE.FogExp2(skyColor, 0.012); const ambientLight = new THREE.AmbientLight(0xcce0ff, 0.6); this.scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xfffae5, 1.2); directionalLight.position.set(50, 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.bias = -0.0001; this.scene.add(directionalLight); const fillLight = new THREE.DirectionalLight(0x8eb1ff, 0.4); fillLight.position.set(-50, 50, -50); this.scene.add(fillLight); const hemiLight = new THREE.HemisphereLight(0xfffaeb, 0x080820, 0.4); this.scene.add(hemiLight); // Build world this.createTerrain(); this.createWater(); this.createVegetation(); this.createTitle(); this.createPlayer(); this.setupControls(); // NPCs & Crabs this.createNPCs(); this.createCrabs(); // Camera this.camera.position.set(10, 8, 10); this.camera.lookAt(this.player.position); this.animate(); return () => this.cleanup(); } handleResize() { const w = window.innerWidth; const h = window.innerHeight; const dpr = window.devicePixelRatio; this.camera.aspect = w / h; this.camera.updateProjectionMatrix(); this.renderer.setSize(w, h); this.renderer.setPixelRatio(dpr); } updateVisibleChunks() { const pcx = Math.floor(this.player.position.x / this.CHUNK_SIZE); const pcz = Math.floor(this.player.position.z / this.CHUNK_SIZE); const newVisible = new Set(); for (let x = -this.RENDER_DISTANCE; x <= this.RENDER_DISTANCE; x++) { for (let z = -this.RENDER_DISTANCE; z <= this.RENDER_DISTANCE; z++) { const chunkX = pcx + x; const chunkZ = pcz + z; const key = this.getChunkKey(chunkX, chunkZ); newVisible.add(key); if (!this.chunks.has(key)) { const chunkMeshes = this.generateChunk(chunkX, chunkZ); this.chunks.set(key, chunkMeshes); Object.values(chunkMeshes).forEach(mesh => { this.scene.add(mesh); }); this.addVegetationToChunk(chunkX, chunkZ); } } } for (const [key, chunkMeshes] of this.chunks.entries()) { if (!newVisible.has(key)) { Object.values(chunkMeshes).forEach(mesh => { this.scene.remove(mesh); if (mesh.geometry) mesh.geometry.dispose(); }); this.chunks.delete(key); const veg = this.vegetation.get(key); if (veg) { this.scene.remove(veg); veg.traverse(child => { if (child.geometry) child.geometry.dispose(); if (child.material) child.material.dispose(); }); this.vegetation.delete(key); } } } this.visibleChunks = newVisible; } animate() { requestAnimationFrame(this.animate.bind(this)); if (this.player) { this.updatePlayer(); this.updateVisibleChunks(); this.updateChatNotification(); } // NPC logic this.npcs.forEach(npc => { if (!npc.isTalking) { npc.update(this.getHeightAtPosition.bind(this)); } if (npc.nameSprite) { const nameScale = 1 + Math.sin(Date.now() * 0.002) * 0.1; npc.nameSprite.scale.set(2 * nameScale, 0.5 * nameScale, 1); } }); // Crabs this.crabs.forEach(crab => crab.update()); // Water wave if (this.waterMesh) { this.waterMesh.position.x = this.player.position.x; this.waterMesh.position.z = this.player.position.z; this.waterMesh.position.y = -0.5 + Math.sin(Date.now() * 0.001) * 0.1; } this.renderer.render(this.scene, this.camera); } createVegetation() { for (const [key] of this.chunks.entries()) { const [cx, cz] = key.split(',').map(Number); this.addVegetationToChunk(cx, cz); } } addVegetationToChunk(cX, cZ) { const vegetation = new THREE.Group(); const startX = cX * this.CHUNK_SIZE; const startZ = cZ * this.CHUNK_SIZE; // Grass for (let i = 0; i < 100; i++) { const x = startX + Math.random() * this.CHUNK_SIZE; const z = startZ + Math.random() * this.CHUNK_SIZE; const h = this.getHeightAtPosition(x, z); if (h > 0) { const grass = new THREE.Mesh( SHARED_GEOMETRIES.grass, VEGETATION_MATERIALS.grass ); grass.position.set(x, h + 0.25, z); grass.rotation.x = -Math.PI / 2; grass.rotation.z = Math.random() * Math.PI; vegetation.add(grass); } } // Flowers for (let i = 0; i < 20; i++) { const x = startX + Math.random() * this.CHUNK_SIZE; const z = startZ + Math.random() * this.CHUNK_SIZE; const h = this.getHeightAtPosition(x, z); if (h > 0) { const flower = new THREE.Mesh( SHARED_GEOMETRIES.flower, VEGETATION_MATERIALS.flower ); flower.position.set(x, h + 0.25, z); flower.rotation.x = -Math.PI / 2; flower.rotation.z = Math.random() * Math.PI; vegetation.add(flower); } } // Trees for (let i = 0; i < 5; i++) { const x = startX + Math.random() * this.CHUNK_SIZE; const z = startZ + Math.random() * this.CHUNK_SIZE; const h = this.getHeightAtPosition(x, z); if (h > 0) { const tree = new THREE.Group(); const trunk = new THREE.Mesh( SHARED_GEOMETRIES.treeTrunk, VEGETATION_MATERIALS.treeTrunk ); trunk.position.y = 1; tree.add(trunk); // Leaves for (let j = 0; j < 3; j++) { const leaves = new THREE.Mesh( SHARED_GEOMETRIES.treeLeaves, VEGETATION_MATERIALS.treeLeaves ); leaves.position.y = 2 + j * 0.5; leaves.scale.set(1.2 - j * 0.2, 0.8, 1.2 - j * 0.2); tree.add(leaves); } tree.position.set(x, h, z); tree.rotation.y = Math.random() * Math.PI * 2; vegetation.add(tree); } } this.scene.add(vegetation); this.vegetation.set(`${cX},${cZ}`, vegetation); } // ---------------------------------------------------------------- // CREATE NPCS - SPAWN ABOVE GROUND // ---------------------------------------------------------------- createNPCs() { const npcData = [ { role: 'merchant', name: 'Finn', color: 0x4caf50 }, { role: 'scholar', name: 'Luna', color: 0x2196f3 }, { role: 'guard', name: 'Marcus', color: 0x9c27b0 }, { role: 'fisherman', name: 'Noah', color: 0xff9800 }, { role: 'farmer', name: 'Emma', color: 0xffeb3b }, { role: 'alchemist', name: 'Sage', color: 0xe91e63 }, { role: 'adventurer', name: 'Riley', color: 0x795548 }, { role: 'mystic', name: 'Aurora', color: 0x9c27b0 }, { role: 'blacksmith', name: 'Forge', color: 0x607d8b }, { role: 'healer', name: 'Flora', color: 0x8bc34a } ]; const spawnRadius = 30; npcData.forEach((data, i) => { const angle = (i / npcData.length) * Math.PI * 2; const randomOffset = (Math.random() - 0.5) * 10; const radius = spawnRadius + randomOffset; const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; // *** IMPORTANT *** Place them above ground const groundHeight = this.getHeightAtPosition(x, z); const spawnY = groundHeight + 0; // 0 units above the ground const position = new THREE.Vector3(x, spawnY, z); const npc = new NPC(this.scene, position, data.color, data.role, data.name); npc.mesh.scale.set(1.5, 1.5, 1.5); // Name label code, same as before... const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 256; canvas.height = 64; const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); gradient.addColorStop(0, 'rgba(0,0,0,0.7)'); gradient.addColorStop(0.5, 'rgba(0,0,0,0.9)'); gradient.addColorStop(1, 'rgba(0,0,0,0.7)'); ctx.fillStyle = gradient; ctx.roundRect(0, 0, canvas.width, canvas.height, 10); ctx.fill(); ctx.font = 'bold 32px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = 'rgba(0,0,0,0.5)'; ctx.fillText(data.name, canvas.width / 2 + 2, canvas.height / 2 + 2); ctx.fillStyle = '#fff'; ctx.fillText(data.name, canvas.width / 2, canvas.height / 2); const texture = new THREE.CanvasTexture(canvas); const spriteMaterial = new THREE.SpriteMaterial({ map: texture, transparent: true, depthTest: false }); const sprite = new THREE.Sprite(spriteMaterial); sprite.position.y = 1.8; sprite.scale.set(2, 0.5, 1); npc.mesh.add(sprite); npc.nameSprite = sprite; npc.name = data.name; this.npcs.push(npc); }); // Mysterious Squid // If you want the squid in water, you can keep its Y position around -2 or so: // Find a suitable deep water location for the squid let squidX, squidZ, groundHeight; const waterLevel = -0.5; const minDepth = -6; const maxAttempts = 20; let attempt = 0; do { const squidAngle = Math.random() * Math.PI * 2; const squidRadius = 15; // Similar to inner crab radius squidX = Math.cos(squidAngle) * squidRadius; squidZ = Math.sin(squidAngle) * squidRadius; groundHeight = this.getHeightAtPosition(squidX, squidZ); attempt++; } while (groundHeight > minDepth && attempt < maxAttempts); // Position squid in open water, floating higher const spawnY = Math.max(waterLevel - 1, minDepth + 3); const squidPosition = new THREE.Vector3( squidX, spawnY, squidZ ); this.squid = new Squid(this.scene, squidPosition); // Label const canvas2 = document.createElement('canvas'); const ctx2 = canvas2.getContext('2d'); canvas2.width = 256; canvas2.height = 64; const gradient2 = ctx2.createLinearGradient(0, 0, canvas2.width, 0); gradient2.addColorStop(0, 'rgba(0, 40, 60, 0.8)'); gradient2.addColorStop(0.5, 'rgba(0, 40, 60, 0.9)'); gradient2.addColorStop(1, 'rgba(0, 40, 60, 0.8)'); ctx2.fillStyle = gradient2; ctx2.roundRect(0, 0, canvas2.width, canvas2.height, 10); ctx2.fill(); ctx2.font = 'bold 32px Arial'; ctx2.textAlign = 'center'; ctx2.textBaseline = 'middle'; ctx2.shadowColor = 'rgba(0, 255, 255, 0.5)'; ctx2.shadowBlur = 10; ctx2.fillStyle = '#00ffff'; ctx2.fillText('The Ancient One', canvas2.width / 2, canvas2.height / 2); const texture2 = new THREE.CanvasTexture(canvas2); const spriteMaterial2 = new THREE.SpriteMaterial({ map: texture2, transparent: true, depthTest: false }); const sprite2 = new THREE.Sprite(spriteMaterial2); sprite2.position.y = 6; sprite2.scale.set(2, 0.5, 1); this.squid.mesh.add(sprite2); this.squid.nameSprite = sprite2; this.npcs.push(this.squid); this.setupChatSystem(); } setupChatSystem() { const chatContainer = document.createElement('div'); chatContainer.style.cssText = ` position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 300px; display: none; z-index: 9999; pointer-events: auto; `; const chatInput = document.createElement('input'); chatInput.type = 'text'; chatInput.style.cssText = ` width: 100%; padding: 8px; border: 2px solid #333; border-radius: 4px; background: rgba(255, 255, 255, 0.9); `; chatContainer.appendChild(chatInput); document.body.appendChild(chatContainer); this.chatUI = { container: chatContainer, input: chatInput }; chatInput.addEventListener('keypress', async (e) => { if (e.key === 'Enter' && chatInput.value.trim()) { const nearbyNPC = this.findNearbyNPC(); if (nearbyNPC) { const response = await nearbyNPC.chatAI.getResponse( `As a ${nearbyNPC.role}, respond to: ${chatInput.value}` ); this.showNPCResponse(response); } chatInput.value = ''; chatInput.blur(); } }); window.addEventListener('keydown', (e) => { if (e.code === 'KeyT') { e.preventDefault(); const nearbyNPC = this.findNearbyNPC(); if (nearbyNPC) { const distance = this.player.position.distanceTo(nearbyNPC.mesh.position); const isAnyTalking = this.npcs.some(n => n.isTalking); if (distance < 5 && !isAnyTalking && !nearbyNPC.isTalking) { nearbyNPC.startChat(); if (this.chatNotification) { this.chatNotification.style.display = 'none'; } } } } }); } findNearbyNPC() { const INTERACTION_DISTANCE = 5; let closestNPC = null; let closestDist = INTERACTION_DISTANCE; this.npcs.forEach((npc) => { if (npc.isTalking) return; const dist = this.player.position.distanceTo(npc.mesh.position); if (dist < closestDist) { closestDist = dist; closestNPC = npc; } }); return closestNPC; } updateChatNotification() { if (!this.chatNotification) { this.createChatNotification(); } const nearbyNPC = this.findNearbyNPC(); const isAnyTalking = this.npcs.some((n) => n.isTalking); if (nearbyNPC && !isAnyTalking) { const distance = this.player.position.distanceTo(nearbyNPC.mesh.position); if (distance < 5 && !nearbyNPC.isTalking) { const npcType = (nearbyNPC.role === 'ancient_squid') ? 'Ancient Squid' : (nearbyNPC.role.charAt(0).toUpperCase() + nearbyNPC.role.slice(1)); const npcName = nearbyNPC.name || npcType; this.chatNotification.textContent = `Talk to ${npcName} (T)`; this.chatNotification.style.display = 'block'; this.chatNotification.style.cursor = 'pointer'; this.chatNotification.onclick = (e) => { e.preventDefault(); e.stopPropagation(); if (distance < 5 && !nearbyNPC.isTalking) { nearbyNPC.startChat(); this.chatNotification.style.display = 'none'; } }; } else { this.chatNotification.style.display = 'none'; } } else { this.chatNotification.style.display = 'none'; } } createChatNotification() { this.chatNotification = document.createElement('div'); this.chatNotification.style.cssText = ` position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); color: white; padding: 12px 20px; border-radius: 8px; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; z-index: 9999; display: none; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); border: 2px solid rgba(255,255,255,0.3); animation: fadeIn 0.3s ease-out; transition: all 0.3s ease; user-select: none; pointer-events: auto; `; this.chatNotification.addEventListener('mouseover', () => { this.chatNotification.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; this.chatNotification.style.transform = 'translateX(-50%) scale(1.05)'; this.chatNotification.style.boxShadow = '0 0 15px rgba(255,255,255,0.2)'; }); this.chatNotification.addEventListener('mouseout', () => { this.chatNotification.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; this.chatNotification.style.transform = 'translateX(-50%) scale(1)'; this.chatNotification.style.boxShadow = 'none'; }); this.chatNotification.addEventListener('mousedown', () => { this.chatNotification.style.transform = 'translateX(-50%) scale(0.95)'; }); this.chatNotification.addEventListener('mouseup', () => { this.chatNotification.style.transform = 'translateX(-50%) scale(1.05)'; }); const style = document.createElement('style'); style.textContent = ` @keyframes fadeIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } `; document.head.appendChild(style); document.body.appendChild(this.chatNotification); } showNPCResponse(response) { const nearNPC = this.findNearbyNPC(); if (nearNPC) { nearNPC.showResponse(response); } } createCrabs() { const numCrabs = 20; const waterRadius = 40; const innerRadius = 10; for (let i = 0; i < numCrabs; i++) { const baseAngle = (i / numCrabs) * Math.PI * 2; const randomAngleOffset = (Math.random() - 0.5) * 0.5; const angle = baseAngle + randomAngleOffset; const radius = innerRadius + Math.random() * (waterRadius - innerRadius); const x = Math.cos(angle) * radius + (Math.random() - 0.5) * 5; const z = Math.sin(angle) * radius + (Math.random() - 0.5) * 5; const y = -0.5 + (Math.random() - 0.5) * 0.2; const position = new THREE.Vector3(x, y, z); const crab = new Crab(this.scene, position); this.crabs.push(crab); } } cleanup() { window.removeEventListener('resize', this.handleResize.bind(this)); this.mountRef.current.removeChild(this.renderer.domElement); if (this.chatNotification) { document.body.removeChild(this.chatNotification); } if (this.titleElement) { document.body.removeChild(this.titleElement); this.titleElement = null; } // Remove chunks this.chunks.forEach(chunkMeshes => { Object.values(chunkMeshes).forEach(mesh => { if (mesh.geometry) mesh.geometry.dispose(); this.scene.remove(mesh); }); }); this.chunks.clear(); // Remove NPCs this.npcs.forEach(npc => { npc.endChat(); this.scene.remove(npc.mesh); npc.mesh.traverse(child => { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(m => m.dispose()); } else { child.material.dispose(); } } }); }); this.npcs = []; // Remove crabs this.crabs.forEach(crab => { this.scene.remove(crab.mesh); crab.mesh.traverse(child => { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(m => m.dispose()); } else { child.material.dispose(); } } }); }); this.crabs = []; // Remove vegetation this.vegetation.forEach(vegGroup => { this.scene.remove(vegGroup); vegGroup.traverse(child => { if (child.geometry) child.geometry.dispose(); if (child.material) child.material.dispose(); }); }); this.vegetation.clear(); // Shared Object.values(SHARED_GEOMETRIES).forEach(geo => geo.dispose()); Object.values(VEGETATION_MATERIALS).forEach(mat => mat.dispose()); if (this.blockGeometry) this.blockGeometry.dispose(); if (this.materials) { Object.values(this.materials).forEach(m => { if (Array.isArray(m)) { m.forEach(x => x.dispose && x.dispose()); } else if (m.dispose) { m.dispose(); } }); } if (this.waterMesh) { this.waterMesh.geometry.dispose(); this.waterMesh.material.dispose(); } this.renderer.dispose(); } }