Three.js相机旋转场景保持Mesh的角度姿态不变

在开发中,你可以通过OrbitControls等相机控件改变相机的参数实现场景的旋转缩放平移等渲染效果,比如你通过OrbitControls旋转了threejs整个场景,这时候场景中的网格模型Mesh角度姿态通常会跟着改变,这时候如果你希望保持Mesh的角度姿态保持不变应该怎么做?其实这很简单,你只需要获取相机对象的四元数或欧拉角,然后复制给网格模型Mesh即可。

    function render() {
      //把相机的四元数值复制给mesh对象
      mesh.quaternion.copy(camera.quaternion)

      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }

角度属性.rotation的值是欧拉对象Euler,四元数属性.quaternion的值是四元数对象Quaternion,模型对象的角度属性.rotation和四元数属性.quaternion都记录了相机对象绕xyz轴旋转的信息,因此也可以通过复制角度属性.rotation保持Mesh姿态不随相机变化

mesh.rotation.copy(camera.rotation)