Three.js Fish Animation

``` Three.js Fish Animation // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87CEEB); // Camera setup const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 5); // Renderer setup const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Controls const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // Water surface const waterGeometry = new THREE.PlaneGeometry(20, 20, 1, 1); const waterMaterial = new THREE.MeshBasicMaterial({ color: 0x1E90FF, transparent: true, opacity: 0.8 }); const water = new THREE.Mesh(waterGeometry, waterMaterial); water.rotation.x = -Math.PI / 2; scene.add(water); // Fish body const fishGeometry = new THREE.SphereGeometry(0.5, 32, 32); const fishMaterial = new THREE.MeshPhongMaterial({ color: 0xFF6347, shininess: 30 }); const fish = new THREE.Mesh(fishGeometry, fishMaterial); scene.add(fish); // Fish tail const tailGeometry = new THREE.ConeGeometry(0.2, 0.5, 32); const tailMaterial = new THREE.MeshPhongMaterial({ color: 0xFF6347 }); const tail = new THREE.Mesh(tailGeometry, tailMaterial); tail.position.set(-0.7, 0, 0); tail.rotation.z = Math.PI / 2; fish.add(tail); // Fish eye const eyeGeometry = new THREE.SphereGeometry(0.1, 16, 16); const eyeMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 }); const eye = new THREE.Mesh(eyeGeometry, eyeMaterial); eye.position.set(0.3, 0.2, 0.4); fish.add(eye); // Light const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.8); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); // Animation variables let time = 0; const speed = 0.5; const amplitude = 0.5; // Animation loop function animate() { requestAnimationFrame(animate); time += 0.01; // Fish movement fish.position.x = Math.sin(time * speed) * 3; fish.position.y = Math.sin(time * speed * 1.5) * amplitude; fish.position.z = Math.cos(time * speed) * 3; // Fish rotation to face direction fish.lookAt( fish.position.x + Math.sin(time * speed), fish.position.y + Math.sin(time * speed * 1.5) * 0.1, fish.position.z + Math.cos(time * speed) ); // Tail wagging tail.rotation.z = Math.PI / 2 + Math.sin(time * 5) * 0.3; controls.update(); renderer.render(scene, camera); } // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); animate(); ```