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