使用three.js导入OBJ模型，变更、修改成其他OBJ模型和模型不可见原因说明_three替换导入的模型

最近的一个项目需要在HTML中对OBJ模型进行大量的变更，修改为其他模型。基于这个需求下，这里有一种解决方案。

另外在各大论坛上的相关博客基本都是那几种导入obj例子····并没有对后续操作进行说明。

比如因为灯光、 模型大小、照相机位置等原因而导致模型不可见的问题，这篇文章会大致说明。

 

首先是用到的JS

HTML：

 

 

 

CSS：

 

 

 

 

 

JS：

前提：使用file协议打开模型需要做浏览器跨域，自行百度谷歌浏览器跨域。或者搭个服务器，把整个项目拖上去发布，就不用跨域了。

定义模型地址：

 Address是obj模型以及mtl模型的父地址 如：f:\XX\FF

 

 

导入模型：

第一步：创建渲染器，可以理解为模型在哪个范围内展示。这里是以一个<div id="canvas-frame"></div> 为区域。

 

第二步：创建照相机，你现在直接用眼睛是看不到页面中的模型，而需要照相机给模型“录像”，然后在照相机的内存中看到录像。

 

 

 

 

 

 

 

 

 

图中的距离不一定每个模型都这样。（创建照相机的中的参数自行百度，要抄的话将20改为45吧，45是默认值。）

到这一步你首先需要将图中的 X,Y,Z三个数据全部归0，作用就是将照相机放到原点（这时候是看不到的模型的）。后续会说明如何调节。

第三步：导入模型：刚开始不要设置模型的位置，它会在正中间！·····

第四步：做好辅助线，便于调节照相机、灯光的位置

200那个参数是辅助线的长度

 

 

 

 

 

第五步：灯光，可以理解为：照相机如果要“录像”，那么就需要光，没光的话就是一片黑，录制下来你也看不到。

（各大灯光效果请百度three.js光源，我这里只用了一个平行光和一个环境光。）.

到了这一步就有了 模型的展示范围，再给模型补上光，再通过照相机去“录像”。这三个条件满足后可以看到模型了，如果没看到可以先F12，看看有没有红色。没有的话再进行 “录像角度”（照相机）和灯光位置的调节（下一步会说明）。

第六步：调节照相机和灯光的位置说明。两者的位置调节原理一致。

照相机的位置（X,Y,Z）如果为全0的情况下，它是在原点（模型的正中间）的。此时你可以调节Z轴，比如Z = 200，

在这里暂时把（X称为左右，Y称为上下，Z称为前后），照相机会向靠近你的位置移动，就是靠近你的位置为正。远离你的位置为负。而照相机镜头永远是向着模型的。 可以根据上面做的辅助线来想象一下，

先把平行光的位置调整在（0，0，1），意思就是从前往后照亮模型。建议刚开始就用平行光，这个光源比较简单·····

然后再调节照相机位置，开始时可以不用动X轴和Y轴，只动Z轴的距离。

调用以上函数之前记得把坐标轴和照相机添加进去

到这里F12页面，不出红色的情况下，模型就可以展示出来了。

 

接下来是模型控制的两种方式，用于模型的旋转，缩放等

第一种： 

                //创建控件并绑定在相机上
                trackballControls = new THREE.TrackballControls(camera);
                //旋转速率
                trackballControls.rotateSpeed = 0.2;
                //滚轮放大缩小速率
                trackballControls.zoomSpeed = 0.2;

                //平移速率
                // trackballControls.panSpeed = 0.5;
                //关闭放大缩小
                trackballControls.noZoom=false;
                //关闭平移
                trackballControls.noPan=false;

第二种：

 var controls = new THREE.OrbitControls( camera, renderer.domElement ); 
                //旋转速度
                controls.rotateSpeed  = 0.3;
                //设置相机距离原点的最远距离 
                 controls.minDistance = 200; 
                 //设置相机距离原点的最远距离 
                 controls.maxDistance = 1000; 
                 controls.enableDamping = true;
                controls.dampingFactor = 1;

renderer（渲染器）.domElement 这个参数是指定的在渲染器所渲染的范围内起用鼠标操作模型会起作用。如果不设置的情况下，默认全屏的任何一个位置都可以控制模型的旋转等。 你自己可以试试就知道了。其他的参数自行百度·······

 

文章的最后就是 为了解决用户要导入不同的obj模型，如何删除当前OBJ模型，而导入新的OBJ模型。 并且页面中的展示出来的，用户修改的那部分数据不变（不变成初始值）。（保证这个就不能更换OBJ的地址，再刷新页面这么操作了····），初步我设想的是重新执行一下导入模型的那部分JS，发现新导入的模型会和旧的模型重合，而我各种狗狗和百度都找不到删除旧OBJ模型的方式······

以下是解决方案：

有故事的小伙伴都注意到了，在id="canvas-frame"的DIV外面有一个outer这个DIV。

为得就是TMD把这个"canvas-frame"节点全部给删了（所以才创建了外层的id="outer"这个DIV，用于删除子节点）。理所当前的渲染器的范围在DIV内，所以，这个canvas-frame没有了，

渲染器的范围也就不存在，模型就不可见了，此时在重新创建一个id="canvas-frame"的节点。再重新执行一遍从创建渲染器开始的所有的JS代码，这样就完成了本次需求。

最外层那个id="outer"的DIV还保证了 创建新的id="canvas-frame"的这个DIV的位置不变，也就可以保证变更成新的OBJ模型之后的页面布局不会改变。

更改模型的源码如下：

 

不太清楚这样的方式会不会有什么弊端、如果小伙伴们的实现方式有更好的选择，比如three.js有内置的方法这样、请留言··