【Web】使用Three.js制作有数据源控制的3D模型动画

懒得写了，大概记录下步骤。

 

1. 使用开源软件Blender制作3D模型

1.1 Blender

Blender类似于3DMax、Maya，是制作3D模型的工具软件，是开源软件，但较难使用，无法制作精确尺寸模型，学习资料匮乏，仅有B站有少量教学视频。

1.2 制作模型

Three.js只能控制 模型中的 不同 物体，不能控制模型中的 物体 的部分。

如果要做个小轿车行驶的动画，如果轮子无需做转动效果，整个小车可作为一个“物体”，车轮此时就不能被单独控制。如果每个车轮都需要旋转动画，那你需要5个“物体”：车体、4个车轮。

 

可以为每个物体命名，比如 4个车轮命名为 lf_wheel，lb_wheel，rf_wheel, rb_wheel。这样在 Three.js 就能直接 引用该命名。

 

1.3 导出模型

导出格式选择 gltf 或 glb，该格式包含模型、灯光、材质等信息，并且最重要的是此格式是 Three.js 推荐支持格式。该格式也是开源格式，也是未来的主流3D模式。

 

关于glb格式：

如果你使用的是最新版的Windows10，可以在打开“3D查看器”软件。该软件默认显示的第一个3D模型就是 glb 格式的 蜜蜂模型文件：“Bee.glb”。这说明微软也官方支持 gltf/glb 格式。由此可见，gltf/glb 格式会是未来的主流的开源3D模型格式。

glTF 格式官网：https://www.khronos.org/gltf/。该组织立志将 glTF 打造为“3D领域的JPEG格式”。glb 是glTF 格式的二进制版，单文件更小更紧凑。

 

2. 使用 Three.js 控制3D模型

2.1 解析模型

导出后的 glb 模型在被 Three.js 解析后，可使用 JavaScript 控制 glb 模型内的【物体】的 x, y, z 等属性，从而控制 3D模型的各组件的坐标，形成移动效果。

在Three.js 中，可以像 读取对象属性一样，获取 模型model的灯光、摄像机、物体数组。

模板代码如下（摘自Three.js官网）：

 

2.2 键鼠交互

加入如下代码，可实现：旋转、缩放视图。使用鼠标移动物体未尝试，因本项目是现实数据控制3D模型产生动画，鼠标不能控制物体。

 

 

3. 后端数据传输到前端

从后端获取现实中采集的位置数据。