three.js 限制模型旋转角度 不漏出模型的底部

three.js 是一个基于 JavaScript 的 3D 渲染库，用于在浏览器上创建逼真的 3D 图形。如果你想在使用 three.js 时限制模型的旋转角度，使其始终不露出底部，可以采用以下几个步骤：

1. **设置旋转轴**：确保模型默认旋转在 y 轴上，因为垂直于屏幕的物体不会露出底部。你可以使用 `THREE.Object3D.rotation.set(0, angle, 0)` 来控制旋转角度，其中 angle 就是你允许的最大旋转角度。

2. **监听事件**：使用 `addEventListener` 监听 `'change'` 或 `'rotate'` 事件，当模型旋转时检查是否超过了限制角度，如果是则调整回限制范围。

示例代码：

let object = new THREE.Object3D();
object.rotation.y = 0; // 设置初始旋转

object.addEventListener('change', function () {
    let currentRotationY = object.rotation.y;
    if (currentRotationY > allowedRotation) {
        object.rotation.y = allowedRotation;
    } else if (currentRotationY < -allowedRotation) {
        object.rotation.y = -allowedRotation;
    }
});

3. **`allowedRotation` 变量**：定义一个变量存储允许的最大旋转角度，如 `const allowedRotation = Math.PI / 4;`，这个值可以根据需求自行调整。

这样，当你在应用中操纵模型时，它就会始终保持在可视范围内，不会暴露底部部分。