让某个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片叶子和连接处是一个整体,而且这个整体必须是圆形。也就是被一个透明的圆环包起来。这样旋转的时候才是对称的,中心点才是居中的。

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐