ThreeJS 开发经验和注意点

1. 一个物体b add()加载到 父物体a 里，如果这个 父物体a 带有旋转等属性，那么这个物体b就出现位置旋转错位等现象，这时候，就需要使用 attach()方法把 物体b 加载到 父物体a中；

   .add ( object : Object3D, ... ) : null
   添加对象到这个对象的子级，可以添加任意数量的对象。 当前传入的对象中的父级将在这里被移除，因为一个对象仅能有一个父级。

   .attach ( object : Object3D ) : this
   将object作为子级来添加到该对象中，同时保持该object的世界变换。

   api: https://threejs.org/docs/index.html#api/zh/core/Object3D

   此问题依据：https://github.com/mrdoob/three.js/issues/6426

2. 问题：有时候改变一个mesh的material.color的值，其他mesh的color也跟着改变了。

   原因：这些mesh用着同一个material

   threejs中的网格物体对材质的是引用传递，不是值传递，如果material1 被 mesh1和mesh2用到了，改变 mesh1.material.color，则mesh2的材质颜色也改了

   解决方案：给这些mesh不同的material；或者在mesh赋值的时候clone一下，例如

   mesh.material = nMaterial.clone();

3. 问题：模型人员给的fbx，加载到程序里面后，给fbx里的mesh添加BoxHelper，发现大小对不上！

   原因：模型人员给的fbx，比较大，程序这边缩小了fbx（fbx是group），然后给fbx里的mesh添加BoxHelper，还是按照mesh的真实大小，创建的；但是fbx缩小了，里面的元素也跟着缩小了；所以看起来fbx，mesh都变小了；但是直接获取mesh的话，还是获取的mesh的真实大小，顶点等数据；

   如果给fbx添加 BoxHelper，那显示是正常的，但是如果要实现碰撞功能，必须要mesh类型才行，这样的话，不能用fbx，只能用里面的mesh，这时候大小，顶点等数据，就产生偏差了。

   解决方案：不要直接加载fbx到场景里，而是加载里面的mesh到场景中，再缩小大小。

4. threejs 坐标系 和 3dsmax 导出的模型的坐标系 对不上，有差异。

   在3dsmax中，与three.js的坐标系相比，y 和 z 轴交换了。threejs的y轴向上，z轴向屏幕；3dsmax中z轴向上，y轴面向屏幕。

   3dsmax坐标系与导出fbx的坐标系

   OpenGL坐标系

   3dsmax z轴朝上的历史 https://zhuanlan.zhihu.com/p/338314803

   

   建议：3dsmax导出模型的时候，设置Y轴向上；

   只改Y轴向上效果是不对的，正确的修改方法如下：

   https://blog.csdn.net/wlj613613/article/details/17797795

   参考：https://www.pianshen.com/article/5370477222/

5. threejs里基本长度单位好像是cm，一般3dsmax人员做模型的时候，默认基本长度单位是m；因此在开始制作模型的时候，应该统一规定基本长度单位为cm；然后3dsmax做出的模型，加载到threejs场景中都太大，要缩小100倍左右才能正常观看到；

6. 3dsmax等发布模型的时候，注意原点位置；如无特殊要求，一般以模型中心点为原点；如有特殊需求，按照程序和模型的对接需求来；

   ​

一. material -基础属性

opacity和transparent是一起使用的,transparent为true时，opacity才起作用
overdraw 渲染物体有缝隙时，将其设为true
side 决定了绘制那个面，还是两个面都进行绘制
材质的属性值更新时，需要将needsUpdate为TRUE
二. material -融合属性

• blending 决定了物体的材质如何和背景融合
• blendsrc blenddst 融合公式

三 material -高级属性
depthTest depthWrite :绘制不透明物体时，深度测试开启是能保证正确的遮挡关系，绘制透明物体时，关掉深度测试能保证正确的blend．
alphaTest 0 ~1 如果某个像素小于这个值，则不会显示。

Donate