Three.js 开发之 物体围绕自己轴心旋转(二)
·
让某个mesh绕自己的Y轴旋转,而不是中心点旋转.
在scene三维场景内,默认的中心点就是(0, 0,0),添加到场景内的物体的position定位都是围绕原点进行的。此时,如果添加了电风扇或者空调风机进去,风扇旋转也会绕着原点,这是不合业务的。所以要使用方法处理坐标和定位问题,让物体的旋转中心是自己的中心。
效果图:
思路:外部导入的模型,里面的物体的类型一般都是mesh或者group,然鹅物体旋转的中心点是以Object3D为中心点的。所以:创建一个3d对象,把物体加入到这个对象中,同时获取物体的中心点,将3d对象的位置定位到物体的中心点,二物体的定位置反处理即可。这样物体的中心点就是对象的中心点了。
1、获取中心点,并改变定位
let rotateObj = [];
function changePivot(obj){
let center = new THREE.Vector3();
obj.geometry.computeBoundingBox();
obj.geometry.boundingBox.getCenter(center);
let wrapper = new THREE.Object3D();
wrapper.position.set(center.x, center.y, center.z);
obj.position.set(-center.x, -center.y, -center.z);
wrapper.add(obj);
scene.add(wrapper)
return wrapper;
}
2、加载外部模型成功后,筛选出需要选择的物体,并且存入数组
。
obj.children.forEach(item => {
if (item.name.includes('shanye')) {
rotateObj.push(changePivot(item))
}
})
3、去除数组,在render函数内执行绕轴旋转
。
// 这里面,我的是需要绕z轴旋转
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
controls.update(clock.getDelta())
if (rotateObj) {
rotateObj.forEach(item => {
item.rotation.z -= 0.02
})
}
}
render();
注意点:扇叶部分必须是一个整体,也就是3片叶子和连接处是一个整体,而且这个整体必须是圆形。也就是被一个透明的圆环包起来。这样旋转的时候才是对称的,中心点才是居中的。
更多推荐
已为社区贡献2条内容
所有评论(0)