threejs引用的模型究竟是选择C4D还是Blender

Posted 2021-05-03 前端程序设计

这几天画了一些时间研究之前做的模型如何更好地在网页端呈现，最早研究这个的时候，只是单纯地将同事做的模型套到threejs案例中，试过obj、fbx、glb/gltf格式，当时发现同事直接生成的模型非常庞大，一个椅子不加贴图就几百M，用在PC端尚且卡，在手机端更无法呈现。

再次研究这个概念的时候，才明白了很多原理，现在导出可用的模型只有100多KB，非常好用，在比较了各种格式的模型后，选择了gltf的格式，它是json形式呈现，方便以后随时修改模型的材质和动画。而且现在C4D 从S22版本开始也支持直接 导出gltf格式，所以绝对是一个趋势。

另一方面，用C4D直接将之前做的动画模型导出gltf后，发现OC材质、灯光、随机动画都没有跟建的模型匹配。但Blender却支持的很好，最终决定以后用C4D建模，然后导出模型到Blender，通过Blender 添加动画和材质。

现在可以结合VUE引入threejs很好地展现模型在网页中了，而且加载速度也很好，毕竟Blender导出还支持压缩模型。之后会写一篇专门代码介绍的文章。

接下来还要研究一下blender的uv贴图，3D物理引擎（Physijs）

参考的资料：

1. Threejs中文网：http://www.webgl3d.cn/

2. 一个快速查看模型的框架： https://modelviewer.dev/examples/scenegra

3. 预览模型的网址： http://www.webgl3d.cn/threejs/editor/

4. Threejs 介绍：https://jelly.jd.com/article/5c3409fed7aa2c0055d09a75

5. 一些案例： https://alwxkxk.github.io/threejs-example/

6. 大神网站：https://www.scaugreen.cn/posts/30679/

7. 骨骼动画案例： https://unboring.net/workflows/animation.html

https://unboring.net/workflows/animation.html

8. 效果： https://bruno-simon.com/

https://my.spline.design/dr10principlesofgooddesign-4782cae2f4da55835438ebc997f26269/

https://gigarama.ru/russianpanteon/en/