THREE.js<简单3D文件的导入>

效果图：

2020061621.gif

一般工作中，前端这边主要是把3D制作人员给的3D模型，给导入到前端当中。这里就简单的教大家如何操作。

知识点：
1. 如何自己简单导出一个3D模型，下面会有详细介绍；
首先可以去访问three.js提供的 编辑器页面地址，然后添加一个物体

image.png

然后选择导出文件的格式，此处导出的是GLTF格式，这样就基本实现了一个简单3D文件的导出。

image.png

2. 如何在本地运行，打开页面（具体是因为浏览器安全问题，所以需要本地启动服务器进行打开，具体可 参考这里 ）；

image.png

image.png

3. 针对不同文件格式的类型，threejs有对应的解析方法，具体可 参考这里,当然每种解析方法都需要引入下（此处是GLTF格式的解析）

 var loader = new THREE.GLTFLoader();
    loader.load('template/scene.gltf', function (gltf) {
        console.log(gltf); 
    })

image.png

文件：

image.png

obj文件导入效果：
解注释后的obj格式文件导入也是可以的，前提是也要引入必要的OBJ加载器

image.png

代码如下：