本篇内容是我从一个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 ,使用该方法可以查找特定名字的对象。
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对象将不会被渲染到场景中 (隐藏对象)