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

最近的一个项目需要在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有内置的方法这样、请留言··

使用three.js导入OBJ模型，变更、修改成其他OBJ模型和模型不可见原因说明相关推荐

数据加载约定表模型变更_08
需求背景:与ODS约定表模型为6张表,现在临时为了满足业务需求新增一张表模型. 表模型变更场景分析: 1>表模型新增 2>表模型表名调整 3>表模型字段新增或者删除 4>表型字 ...
【Three.js】解决使用Three.js导入obj模型不可见问题详细记录
问题描述: 近期在做三维重建项目,需要把最终生成的obj文件导入到web端浏览,这里使用的是three.js(另一个是babylon.js),但博主发现导入meshlab生成的obj时无法显示模型,但 ...
three.js 导入显示模型的时候自动计算模型缩放比例
three.js 导入显示模型的时候自动计算模型缩放比例导入模型(以.stl文件为例),项目是用vue 做的,如果是html就把_this去掉 var _this = this; var loade ...
Django models文件模型变更注意事项（表结构的修改）
表结构的修改 1.表结构修改后,原来表中已存在的数据,就会出现结构混乱,makemigrations更新表的时候就会出错比如第一次建模型,漏了一个字段,后来补上了.(经常遇到模型字段修改) 重新ma ...
双向绑定当obj的值修改时_JavaScript进阶之深入理解数据双向绑定
前言谈起当前前端最热门的 js 框架,必少不了 Vue.React.Angular,对于大多数人来说,我们更多的是在使用框架,对于框架解决痛点背后使用的基本原理往往关注不多,近期在研读 Vue.js ...
利用js-xlsx.js插件实现Excel文件导入并解析Excel数据成json数据格式
<!DOCTYPE html><html lang= ...
模型文件格式：off stl obj
1.物体文件格式(.off)文件用于表示给定了表面多边形的模型的几何体.这里的多边形可以有任意数量的顶点. 普林斯顿形状Banchmark中的.off文件遵循以下标准. OFF文件全是以OFF关键 ...
js导入导出总结与实践
在上一篇文章中JavaScript中AMD和ES6模块的导入导出对比,偏向于理论层面,还有一些同学在微信群里或是私下里针对一些问题进行了沟通,所以有了这一篇文章,对js的导入导出进行总结和实践当直接 ...
Node.js 得到当前目录下文件修改文件名
博客园第一篇,平时都用 .net ,现在 node.js 比较火,就用它做一些小工具,比较方便 Node.js 得到当前目录下文件修改文件名,把 .txt 修改为.md var fs = requir ...

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

使用three.js导入OBJ模型，变更、修改成其他OBJ模型和模型不可见原因说明相关推荐

最新文章

热门文章