233  
查询码:00000846
浅谈three.js中踩过的坑
作者: 王永 于 2020年05月06日 发布在分类 / FM组 / FM服务 下,并于 2020年05月11日 编辑

本篇内容是我从一个three.js小白接手一个项目,在原有的项目上进行bug修改的一些心得,可能方法不对,也或者走了弯路,但是解决了就是好事,我在下面罗列一下。


1.模型如果设置放大缩小的范围,不可以无限放大或者缩小的话,理论上不管是使用正交投影相机还是透视投影相机,都应该使用Zoom属性来控制,但是在我修改项目的时候,发现正交摄影机使用Zoom属性是可以的,但是我换成了透视投影摄像机就不可以了,最后发现,可以通过设置投影投影相机的minDistance和maxDistance的范围来做到设置模型的放大缩小范围。

2.模型如果需要添加一个文字标签,而且要做到美观优雅,使文字在各个方向旋转的时候一直朝向用户,使用sprites精灵,写法参考官方文档。

3.模型通过点击事件切换模型视角通过设置camera相机对象的position属性和lookAt属性设置。

4.控制模型只能左右旋转设置(minPolarAngle 和maxPolarAngle 的值保持一致)
//创建控件对象 相机对象camera作为参数 控件可以监听鼠标的变化,改变相机对象的属性
var controls = new THREE.OrbitControls(camera, renderer.domElement);

controls.minPolarAngle = Math.PI / 4;
controls.maxPolarAngle = Math.PI / 4;

如果模型还要上下也要旋转,那么设置的值不一样就可以,具体反转的角度看设置的值。


5.设置模型平移,如果使用translate,则会叠加,如果想要的效果相同操作只平移一次,应该使用position。


6.如果使用精灵来制作标签,标签是不可以设置背景色的,如果想将标签内文字通过一个矩形的半透明的盒子来包裹,可以canvas画图来操作,具体封装代码看图


7.模型的显示隐藏操作,如果是通过操作数组的visible来设置,要注意父子级的关系,如果父级设置了隐藏,子级如何设置都不会有作用,都需要重新设置


8.模型的显示与隐藏,一定要搞清楚对象的层级关系,相应的选择是删除(remove)对象还是隐藏对象(visible)。


总结:
重点 :一般来说,使用three.js来做项目,我们的项目都是通过第三方做好的模型导入的,所以,我们前端需要做的就是渲染它,来做交互,而这两个操作全部都是操作对象,相关的属性,方法在官方文档上都可以查到,我们需要做的就是console.log(),打印出各种对象,看它们的构成,父子关系,只要对象嵌套看明白了,基本的交互其实都很简单,只要调用相关的属性就可以完成想要的效果。

常用的方法:
场景 (scene):
1>. add(object)   用于向场景中添加对象。使用该方法还可以创建对象组。   
2>. children   用于返回一个场景中所有对象的列表,包括摄像机和光源。   
3>. getObjectByName(name,recursive)   在创建对象时可以指定唯一的标识  name ,使用该方法可以查找特定名字的对象。
  • 当参数  recursive  设置为  false  时,在调用者子元素上查找
  • 当参数  recursive  设置为  true  时,在调用者的所有后代对象上查找
4>. remove(object)    object  为场景中对象的引用,使用该方法可以将对象从场景中移除 (删除对象) 。 
5>. traverse(function)   该方法也可以遍历调用者和调用者的所有后代, function  参数是一个函数,被调用者和每一个后代对象调用  function  方法。   
6>. fog   使用该属性可以为场景添加雾化效果,可以产生隐藏远处物体的浓雾效果。   
7>. overrideMaterial   使用该属性可以强制场景中的所有物体使用相同的材质。

网格对象(Mesh):
1>. position 该属性决定该对象相对于父对象的位置,通常父对象时THREE.Scene对象或者THREE.Object3D对象。
2>. rotation 该属性可以设置绕每个轴的旋转弧度.,还设置了相对特定轴的旋转弧度的方法rotateX (), rotateY (), rotateZ ()。
3>. scale 通过该属性可以沿着x,y,z轴缩放对象。
4>. translateX (), translateY (), translateZ () 沿着x,y,z轴平移的距离。

5>. visible 该属性值为false时,THREE.Mesh对象将不会被渲染到场景中 (隐藏对象)



 推荐知识

 历史版本

修改日期 修改人 备注
2020-05-11 09:27:11[当前版本] 王永 创建版本
2020-05-06 16:28:29 王永 创建版本

知识分享平台 -V 4.8.7 -wcp