Three.js 改变模型对象的旋转轴位置

Question

模型对象可能是一个网格模型对象，也能是包含多个网格模型的层级模型对象。

平移几何体

如果想改变一个网格模型对象的默认旋转轴，平移网格模型对象的几何体Geometry可以改变，主要不能平移网格模型本身，平移网格模型对象本身，执行网格模型的旋转方法并不会影响自身旋转轴的位置。比如通过threejs的BoxGeometry类创建一个立方体几何体，执行.rotateY()旋转方法，默认的旋转轴位置位于立方体的几何中心，如果通过几何体的平移方法translate ()改变几何体顶点的位置坐标，就可以改变网格模型旋转轴默认的旋转位置。

var box=new THREE.BoxGeometry(56,56,56);
// 平移几何体，改变旋转轴
box.translate ( 28, 0, 0 );
var mesh=new THREE.Mesh(box,material);
// 平移网格模型，不影响mesh自身的旋转轴
mesh.position.set(65,23,0)
// 立方体旋转动画效果
function render() {
    renderer.render(scene,camera);
    //每次绕y轴旋转0.01弧度
    // 不平移几何体，绕立方体的几何中心旋转
    // 平移距离是变长的一半，绕立方体侧边线旋转
    mesh.rotateY(0.1);
    requestAnimationFrame(render);
}
render();

嵌套父对象

如果是多个网格模型组成一个模型对象，分别去平移每个网格模型对应的几何体可能比较麻烦，对于这种情况也可以给该模型对象嵌套一个父对象，然后把该模型对象相对于父对象平移一定距离，然后旋转该模型的父对象，不旋转模型本身，可以看到该模型的旋转效果，视觉效果上旋转轴改变了。

// 加载mesh是外部加载得到模型对象
var box=new THREE.BoxGeometry(50,50,50);
box.translate ( 25, 0, 0 );
var mesh=new THREE.Mesh(box,material);

var group = new THREE.Group()
// group作为mesh的父对象
group.add(mesh)
// mesh相对父对象沿着x方向平移-25
mesh.position.x= -25
scene.add(group);

// 立方体旋转动画效果
function render() {
    renderer.render(scene,camera);
    // mesh.rotateY(0.1);
    group.rotateY(0.1);//旋转mesh的父对象
    requestAnimationFrame(render);
}
render();