用ThreeJS实现水母漂浮，体验海洋之美！

使用 Three.js 让水母优雅地游弋在你的屏幕上

准备工作

踏上我们打造虚拟水母之旅的第一步是安装 Three.js 库。在终端中敲入以下命令，让 npm 帮你搞定：

npm install three

创建场景

想象一个舞台，你的水母将在其上翩然起舞。这就是场景。用以下代码赋予它生命：

var scene = new THREE.Scene();

加入水母模型

现在，让我们为舞台添加主角——水母。从网上挑选一个酷炫的 FBX 模型，或亲自动手打造一个。然后用这段代码将它放入场景中：

var loader = new THREE.FBXLoader();
loader.load('path/to/model.fbx', function (object) {
  scene.add(object);
});

点亮舞台

为了让水母在黑暗中闪耀，我们需要一些灯光。让我们创建一个平行光，照亮整个舞台：

var light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(10, 10, 10);
scene.add(light);

安排好视角

我们需要一个视角来欣赏水母的曼妙舞姿。让我们用一个透视相机，设置一下参数：

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);

添加渲染器

最后，我们需要一个画笔来把我们的场景栩栩如生地展现在屏幕上。WebGL 渲染器就是我们的得力助手：

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

让水母动起来

准备好见证奇迹吧！在渲染循环中，让水母优雅地旋转起来：

object.rotation.y += 0.01;

完成

恭喜你！你已经成功让水母在屏幕上翩然起舞。保存代码，运行它，尽情欣赏它们优美的身姿吧。

常见问题解答

1. 如何让水母游得更快？

只需增加 object.rotation.y 中的增量即可，例如：

object.rotation.y += 0.02;

2. 如何改变水母的颜色？

在加载模型时，可以使用 object.material.color.set(0x00ff00) 设置材质颜色。例如：

var loader = new THREE.FBXLoader();
loader.load('path/to/model.fbx', function (object) {
  object.material.color.set(0x00ff00);
  scene.add(object);
});

3. 如何添加背景？

创建一个天空盒纹理，然后将其应用于场景：

var cubeTextureLoader = new THREE.CubeTextureLoader();
cubeTextureLoader.load(['path/to/posx.jpg', 'path/to/negx.jpg', 'path/to/posy.jpg', 'path/to/negy.jpg', 'path/to/posz.jpg', 'path/to/negz.jpg'], function (cubeTexture) {
  scene.background = cubeTexture;
});

4. 如何让水母随着鼠标移动而游动？

使用 THREE.OrbitControls 控件，监听鼠标移动事件，然后更新相机位置。例如：

var controls = new THREE.OrbitControls(camera, renderer.domElement);

5. 如何导出场景？

Three.js 提供了导出场景到不同格式的选项。以下是如何导出为 JSON：

var exporter = new THREE.JSONExporter();
var output = exporter.parse(scene);