three跟随旋转 并控制旋转角度 通过 Quaternion

拾取提醒跟随实现旋转一直正向对着屏幕

四元数（Quaternion）
该类实现了 quaternion 。
四元数在three.js中用于表示 rotation （旋转）。

对 Quaternion 实例进行遍历将按相应的顺序生成它的分量 (x, y, z, w)。

代码示例

const quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.PI / 2 );

const vector = new THREE.Vector3( 1, 0, 0 );
vector.applyQuaternion( quaternion );
1
2
3
4
5

如上将vector变量应用quaternion的旋转

指针锁定控制器（PointerLockControls）也是使用如此实现
指针锁定控制器（PointerLockControls）的原理

const maxPolarAngle = Math.PI;
const minPolarAngle = -Math.PI;
_euler.setFromQuaternion(wrap.quaternion);

_euler.y -= movementX * 0.002 * pointerSpeed;
_euler.x -= movementY * 0.002 * pointerSpeed;

//限制头能转多少度 180
// _euler.x = Math.max(-_PI_2, Math.min(_PI_2, _euler.x));
_euler.x = Math.max(Math.PI / 2 - maxPolarAngle, Math.min(Math.PI / 2 - minPolarAngle, _euler.x));

wrap.quaternion.setFromEuler(_euler);
1
2
3
4
5
6
7
8
9
10
11
12

完全跟随

 const _euler = new Euler(0, 0, 0, "YXZ");
_euler.setFromQuaternion(跟随目标.quaternion);
应用物体.quaternion.setFromEuler(_euler);
1
2
3

限制y轴一直垂直 就是将maxPolarAngle和minPolarAngle都设置 Math.PI / 2

_euler.x = Math.max(Math.PI / 2 - Math.PI / 2, Math.min(Math.PI / 2 - Math.PI / 2, _euler.x));
1

three还有很多属性 可供实现
更高级的可以使用矩阵Matrix实现更接近底层 类似原理
更改变量 然后将变量应用到物体上
不过matrix不限于旋转 ，位置， 缩放都可以
参考

dummy.position.set(_position.x, _position.y, _position.z);
dummy.scale.setScalar(0.5 + Math.random() * 0.5);
dummy.rotation.y = Math.random() * Math.PI;
dummy.updateMatrix();
instancedMesh.setMatrixAt(i, dummy.matrix);
1
2
3
4
5