THREE.JS自定义中心旋转轴

three.js中自带围绕X,Y,Z轴旋转的api，但要想实现任一方向的中心旋转功能尚未找到简单易懂的资料以供参考。

起初想到的是能否借助四元数来实现？但是四元数还是不太友好，不太容易理解。在吃饭反途中灵光一现，之前看到过有网友借助group实现了中心的自定义，是否同样能借助group来实现旋转轴的自定义呢？

想到这里，顿时激动起来。跑会机房开始验证。

果然可以实现！

原理很简单，借助已有的api即可实现。

首先创建模型，并将其加入一个group中

 let cloud= creatPointCloudByGeometry(geom);

 let group=new THREE.Group();
    group.position.set(0,0,0);
    group.add(cloud);

通过模型自带的旋转api控制模型围绕自身的哪个轴旋转，即确定相对自身的旋转方向。

cloud.rotation.x += gui.x;
cloud.rotation.y += gui.y;
cloud.rotation.z += gui.z;

通过旋转group实现模型的旋转相对于场景方向的控制

 group.rotation.x=gui.GroupX;
 group.rotation.y=gui.GroupY;
 group.rotation.z=gui.GroupZ;

这是我的render函数

    function render(){

        group.rotation.x=gui.GroupX;
        group.rotation.y=gui.GroupY;
        group.rotation.z=gui.GroupZ;
        
        if(gui.rotation){
            cloud.rotation.x += gui.x;
            cloud.rotation.y += gui.y;
            cloud.rotation.z += gui.z;
        }
       
        renderer.render(scene,camera);
       
        requestAnimationFrame(render);


    }

通过dat.gui实现参数的调节，效果很不错。

总结：本方法借助已有的api实现了对任意轴的中心旋转功能。

思路：

1.通过模型的旋转api确定模型相对自身的旋转方向；

2.通过group的旋转控制模型相对场景的方向