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

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. 后端数据传输到前端

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

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

利用JS制作抖音同款3D照片墙(three.js)
利用JS制作抖音同款3D照片墙(three.js) 520快到了,跟我一起学习threeJS 用threeJS制作抖音同款3D照片墙源码下载:3D照片墙源码下载地址
3ds Max、Maya安装Babylon.js插件导出gltf格式的3D模型文件方法
3ds Max.Maya安装Babylon.js插件导出gltf格式的3D模型文件方法 **1.去Github project Releases下载Babylon.js插件. 找到和自己安装的3ds ...
CSS3和js炫酷点击按钮3D翻转动画特效
简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览源码下载 ...
关于three.js加载blender导出gltf格式模型动画要点
研究过一次加载动画后导入three.js场景不执行动画,故此记录原因. 我判断两个方面影响动画生成,一.blender导出模型未生成动画通道二.代码原因未执行一.blender 制作动画后应在动画 ...
Unity（三十七）：3D模型动画、脚本控制模型骨骼IK动画
效果(左侧模型动画,右侧模型IK控制) 模型动画下载及导入推荐模型动画下载链接地址 https://actorcore.reallusion.com/ Unity导入教程参见以下链接地址(需要科学上 ...
【Web】html+js 制作小游戏
学习了课程爱心鱼(上)的制作:http://www.imooc.com/learn/515 *在实战终学习了js中canva的使用,现记录如下:* 一.效果二.代码详见:https://githu ...
1、Three.js 实现元宇宙汽车 3D 模型(网络)
Three.js 实现元宇宙汽车 3D 模型技术采用three.js+React实现. Step1:创建一个React项目 create-react-app your-app Step2:加载thr ...
Three.js基础入门系列（九）--导入3D模型
先来学习今天的知识--Three.js导入3D模型复杂的3D模型(比如制作一个飞机模型)一般都是用第三方建模工具生成,然后加载到Three.js中. 01 常用建模制作工具 3Dmax 链接地址:h ...
用html和js制作一个控制灯泡开关效果
用html和js制作一个控制灯泡开关效果 **用css样式来控制div图片和文本的位置,然后用js里面onclick点击事件来控制图片的更换效果来实现当前运行图的效果** 1.以下是运行的效果图 2. ...

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