threejs制作海平面小岛

在Three.js中制作一个海平面小岛是一个有趣的WebGL项目，它结合了几何体、纹理贴图和动画技术。以下是简单的步骤：

1. **创建场景**：首先，你需要导入Three.js库并初始化一个场景（Scene）、相机（Camera）和渲染器（Renderer）。场景通常设置为无重力的海洋环境。

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

2. **地形生成**：你可以使用`THREE.BoxGeometry`和`THREE.Mesh`来创建岛屿的基本形状。为了模拟海浪效果，可以使用多个较小的立方体合并成更大的地形。然后给每个立方体贴上沙石或草地纹理。

const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshStandardMaterial({ map: loadTexture('island.png') });
const islandMesh = new THREE.Mesh(geometry, material);
scene.add(islandMesh);

3. **动态调整**：为了增加动态感，你可以添加一些随机的位置变化或波浪动画。例如，通过修改岛屿的Y坐标或旋转角度来模拟起伏的海面。

function animate() {
  requestAnimationFrame(animate);

  // 随机移动岛屿
  const randomY = Math.random() * 0.5 - 0.25;
  islandMesh.position.y += randomY;

  renderer.render(scene, camera);
}
animate();

4. **光照与阴影**：为了增强真实感，加入环境光或点光源，并开启阴影以便模型投射阴影。

5. **完善细节**：最后，你还可以考虑添加更多的元素，如树木、船只等，以及水面反射的效果，让整体看起来更生动。