threejs加载obj模型 threejs加载3d模型

Three.js中加载三维模型时怎么设置模型坐标归零

不得不承认，这是threejs长久以来的bug，换了好多版本，一直没有处理这个bug，

threejs加载obj模型 threejs加载3d模型

在早期版本中我们可以用如下方法去实现，

objMesh.centroid = new THREE.Vector3();

for (var i = 0, l = geom.vertices.length; i < l; i++) {

objMesh.centroid.add(geom.vertices[i].clone());

}objMesh.centroid.divideScalar(geom.vertices.length);

var offset = objMesh.centroid.clone();

objMesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(-offset.x, -offset.y, -offset.z));

objMesh.position.copy(objMesh.centroid);

怎么把3dax导出的obj转换成js啊。。。。然后用到three.js里面？？

如果是在windows下，就需要有：

1. python-2.6.msi (python运行库,去太平洋下就行)

2. convert_obj_three.py (obj转js脚本，也能下到，没有的话我可以传给你)

安装好python2.6.msi 并保证 python convert_obj_three.py 和 model.obj（模型文件）都在 D:\ ， 然后 点开始>运行>把下面的命令贴到指令框内。并点确定就OK了。

C:\Python26\python d:\convert_obj_three.py -i d:\model.obj -o d:\model.js

ThreeJS渲染一个.obj三维模型文件（Vue）

先来看一个效果：

近有个项目需要实现三维模型的web端渲染，以前虽然也做过类似的项目，单是两个项目一个是ja Application，一个是安卓结合，两个我都只参与到的建模环节，所以知道三维模型文件的大概结构，要想在web端实现渲染，首先要做的就是读取这些模型文件，对里面的点、面、法线、材质进行逐行解析。

各种对比后，发现了ThreeJS。它不仅可以解析obj模型文件，还可以解析大部分市场上有的模型格式文件。

npm 安装后，在node_modules/three/examples/j/loaders/目录下可以看到它支持的模型格式。

PS：demo中使用了vue语法。

组件注销前，解绑全局事件、停止刷新。beforeDestroy()

效果如下：

PS：鼠标移入时，先暂存材质的颜色，移除后再恢复。实现过程有bug，getHex()未得到有效的颜色，所以恢复不到原有的材质颜色，正在查找原因。如有有哪位大神发现问题，请赐教。

优化内容：

2.页面组件销毁时，解绑鼠标事件

3.组件销毁时，清除缓存数据

three.js如何提高模型加载速度

方法如下：

二进制格式：

使用不同文件格式，文件的大小会有所不同，如果同一个模型，导出二进制.fbx大小要比文本格式的.obj文件要小1~2倍。常见的GLTF格式可以是文本格式，也可以使二进制格式，为了更好的传输性能可以选择二进制格式，.glTF打包转化为.glb二进制文件。

减面和法线贴图：

一般3D美术导出模型的时候，会进行减面作，并导出模型的法线贴图,比如你只是加载一个机械零件模型(非批量)，你可以让3D美术进行减面然后导出法线贴图。

这样的话在不影响曲面显示质量前提下，减少模型三角形面数，一方面可以降低模型文件大小提高网络传输性能，另一方面可以提高threejs渲染模型的渲染性能。

加载进度条：

因为Web3D项目加载时间相对普通web页面时间比较长，如果用户一直等着，web页面没有什么反应，可能会关掉，这种情况下，可以在web页面放置一个进度条实时显示模型文件加载进度。

如何获得三维模型文件的加载进度可以查看threejs文档关于FileLoader类的介绍，至于web进度条，可以通过普通HTML和CSS代码去实现，然后和threejs加载进度数据进行绑定即可。

动态分批加载：

如果一个场景中，有多个网格模型模型，比如室内设计效果展示，里面有沙发、椅子、电视等三维模型，这时候把这些模型分别单独建立一个文件，threejs可以按照一定的顺序分别先后加载这些单独的网格模型文件，然后插入到场景中。

这样的话，用户可以以快速度查看到场景中的部分模型，不用一直等待，没有什么反应，用户体验更好。

three.js加载3ds或obj模型，如何实现鼠标拖拽等功能？

【OrbitControls】

// Set to false to disable this control

//鼠标控制是否可用

this.enabled = true;

// "target" sets the location of focus, where the object orbits around

//聚焦坐标

this.target = new THREE.Vector3();

// How far you can dolly in and out ( PerspectiveCamera only )

//小相机移动距离(景深相机)

this.minDistance = 0;

this.maxDistance = Infinity;

// How far you can zoom in and out ( OrthographicCamera only )

//小鼠标缩放大小（正交相机）

this.minZoom = 0;

this.maxZoom = Infinity;

// How far you can orbit vertically, upper and lower limits.

// Range is 0 to Math.PI radians.

//仰视角和俯视角

this.minPolarAngle = 0; // radians

this.maxPolarAngle = Math.PI; // radians

// How far you can orbit horizontally, upper and lower limits.

// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].

//水平方向视角限制

this.minAzimuthAngle = - Infinity; // radians

this.maxAzimuthAngle = Infinity; // radians

// Set to true to enable damping (inertia)

// If damping is enabled, you must call controls.update() in your animation loop

//惯性滑动，滑动大小默认0.25

this.enableDamping = false;

this.dampingFactor = 0.25;

// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.

// Set to false to disable zooming

//滚轮是否可控制zoom，zoom速度默认1

this.enableZoom = true;

this.zoomSpeed = 1.0;

// Set to false to disable rotating

//是否可旋转，旋转速度

this.enableRotate = true;

this.rotateSpeed = 1.0;

// Set to false to disable panning

//是否可平移，默认移动速度为7px

this.enablePan = true;

this.keyPanSpeed = 7.0; // pixels moved per arrow key push

// Set to true to automatically rotate around the target

// If auto-rotate is enabled, you must call controls.update() in your animation loop

//是否自动旋转，自动旋转速度。默认每秒30圈

this.autoRotate = false;

this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60

// Set to false to disable use of the keys

//是否能使用键盘

this.enableKeys = true;

// The four arrow keys

//默认键盘控制上下左右的键

this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };

// Mouse buttons

//鼠标点击按钮

this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };

我在3dmax里面导出了一个obj模型，但是用three.js无法载入，这是什么原因？

three.js 导出obj格式文件，首先，如果你的三维模型比较大，模型范围即坐标x,y,z比较大，记得在导出时候将坐标缩放到一定比率比如0.001。这一点是经验，真的感觉就是three.js的bug。据说是因为thre.js导出obj,如果坐标太大，three.js载入会进行浮点数转换，可能会导致位置不正确。这个是之前导出这种比较大的项目，一点教训。然后导出obj和mtl以及贴图文件，然后使用three.js 配到的objLoader和mtlLoader进行加载。

微信小程序ThreeJs加载3D模型

微信小程序使用ThreeJs需要使用库 threejs-miniprogram ，API和原生ThreeJS基本一样，很好上手。喜欢数字孪生或者游戏的朋友，强烈学习ThreeJs。该库入门简单，有很多的demo可供参考，文档(包含中英文)也比较详细。有用ThreeJS做一个动物世界，模拟原始森林里各种各样的有趣的可爱的动物，包括它们声音和故事。有兴趣的或想加入这个的朋友可以在下面留言。

添加canvash画布，设置宽度，高度设置为屏幕高度减去状态栏高度和导航栏高度。

导入threejs，并创建threejs变量传入模型中，方便使用该变量。