Three.js-模型

模型下载网站

sketchfab

在线制作和下载人物模型：

https://readyplayer.me/hub

账号是邮箱，密码是Xxx19xxxxxx

在线模型调试编辑器

https://threejs.org/editor/

模型操控

(值得一试，有完整流程)用React和Three.js做你的Avatar：

https://blog.nourdinedev.com/how-to-render-3d-model-in-react/

去哪里找3D模型

可以参考这个文章：https://www.zhihu.com/question/297156353/answer/654350088

全类型

国外的一个网站，各种模型都有，需要翻墙：

https://www.turbosquid.com/

CG类的：

https://www.cgtrader.com/

(精)带动画的模型

https://www.mixamo.com/

可以选一个模型，快速绑定动画！

也可以自己上传模型，这个网站太赞了！

但是这个网站访问经常挂，记得提前备好

glTF、fbx

这个是针对CG类的，科技感比较强：

https://sketchfab.com/3d-models?features=downloadable&sort_by=-likeCount

obj

博物馆雕像的实物扫描生成的模型，数量比较有限，没有动画；不过如果会加工，可以做出非常炫酷、逼真的效果：

http://threedscans.com/

stl

这是国内的，质量参差不齐：

https://www.yunmoxing.com/

GLTFLoader

glTF应该是gl translate form的缩写，gl传输格式。

如果有可能的话，我们推荐使用glTF（gl传输格式）。.GLB和.GLTF是这种格式的这两种不同版本， 都可以被很好地支持。由于glTF这种格式是专注于在程序运行时呈现三维物体的，所以它的传输效率非常高，且加载速度非常快。 功能方面则包括了网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和摄像机。

素材纹理什么的，一般都已经包含入glTF文件了；如果加载后看不见，大多是因为没有光照，设置下光照即可：

scene.add(new THREE.AmbientLight(0xffffff));

glTF模型下载网站(部分免费)：

https://sketchfab.com/3d-models?features=downloadable&sort_by=-likeCount

这里有个GLTF、GLB模型的开源预览网站，可以通过源码学习加载相关的内容：

https://gltf-viewer.donmccurdy.com/

模型的素材贴图模糊的问题

经过测试，发现是因为没有设置camera.near导致的，可以通过这个方式解决：

1
2
3
4
5
6
7
8
const box = new Box3().setFromObject(object);
const size = box.getSize(new Vector3()).length();

this.controls.maxDistance = size * 10;
// 这个是影响模糊的关键
this.defaultCamera.near = size / 100;
this.defaultCamera.far = size * 100;
this.defaultCamera.updateProjectionMatrix();

模型

如何找模型

我自己不会建模，不过可以先TB购买一些现成的obj格式的模型文件来做练习。

比如这个是不可以动的，这个是可以动的

如何转换模型格式

模型需要从obj格式转为json格式，这里有个转换工具：http://davidscottlyons.com/threejs-intro/#slide-104

如何查看模型效果

一些坑

这个文章写了一些坑，待阅读：

https://www.cnblogs.com/pursues/p/5226807.html

如何查看模型文件支持的动画有哪些

当你成功load模型后，获取的对象应该有一个animations的属性，这是一个数组，每个元素就是一个动画。

详见官方文档：https://threejs.org/docs/#manual/zh/introduction/Animation-system

定位

怎么获取模型的高度呢？

高度：

1
obj.scene.position.y = -10;

移动

这里有个例子：

https://www.cnblogs.com/liujiekun/p/10736599.html 

1
http-server . -p 8001

http://localhost:8001/html/superMario.html

模型的动画（行走与站立）之间的切换原理：

这个看起来是模型内置的动画效果，我们可以获取这些动画效果，然后渐变切换：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function createRole() {
    // model
    var loader = new THREE.GLTFLoader();
    loader.load('../models/RobotExpressive.glb', function (gltf) {
        role = gltf.scene;
        role.position.y = -16;
        mixer = new THREE.AnimationMixer(role);
        // 从这个代码来看，是模型内置了动画效果
        stateList.Walking = mixer.clipAction(gltf.animations[10]);
        stateList.Standing = mixer.clipAction(gltf.animations[8]);
        // 设置下面两项主要是站着的时候，别抖了
        stateList.Standing.clampWhenFinished = true;
        stateList.Standing.loop = THREE.LoopOnce;
        currentAction = stateList.Standing;
        currentAction.play();
        scene.add(role);
        createSpotlist(new THREE.Vector3(50, 50, 50), role);

    }, undefined, function (e) {
        console.error(e);
    });
}

不同文件类型的3D模型如何二次加工

glTF

glTF和glb格式相互转换：

https://blog.csdn.net/qq_38827821/article/details/89366483

安装一个npm包：gltf-import-export
运行命令：node_modules.bin\gltf-import-export 2-frame.glb -o new.gltf

fbx

obj

大模型加载的性能优化

Three.js中，如何解决外部的大模型（obj，少者几十M多着几百M）加载过程中的性能优化的问题？ - 晓锋的回答 - 知乎
https://www.zhihu.com/question/266757486/answer/883832398

【精】真实感教程

three.js学习笔记(十三)——真实渲染_hongsir_12的博客-CSDN博客_threejs 渲染

BSP-构建3D场景的工具

二元空间划分，简称BSP

Binary space partitioning - Wikipedia

Three.js的BSP库(代码量不多，建议自己迁移过来，重写为ES6的module)：

GitHub - sshirokov/ThreeBSP: CSG with Three.js geometries

GitHub - chandlerprall/ThreeCSG: CSG plugin for Three.js

这是一个利用BSP给墙壁挖洞的文章：

https://zhuanlan.zhihu.com/p/555920342