如何使用 OrbitControls.js 根据相机旋转影响背景亮度

Question

（大家好，我是第一次post）

以下是我想纳入的 simple example:

我想在用户靠近特定方向时让背景逐渐从亮变暗 – 在这种情况下（上面的示例）所需的方向是陡峭的角度，使透视缩短的变形图像看起来像一个普通的头骨（背景值指示用户应该瞄准的角度——有点像玩冷热游戏）
当用户到达所需的方向时（背景相应地 100% 暗）我希望它锁定旋转并在后台触发视频文件或弹出 window.

我假设它与访问 OrbitControls 内的相机旋转值和设置某种事件有关？我不知道如何访问它。

任何形式的帮助、编辑主题的建议或解释都将不胜感激，在此先感谢您！

Answer 1

您可以使用 camera.position 来计算最佳观察点。首先，你得弄清楚你想要的位置是什么（木板是怎么放的我不太清楚，但是这个位置好像是接近于：{ x: 6.8, y: 0.6, z: -1.8}）

var vantagePoint = new THREE.Vector3(6.8, 0.6, -1.8);
var distance = 100;
var normalized = 1;
var endColor = new THREE.Color(0xff9900);
var startColor = new THREE.Color(0x0099ff);
scene.background = startColor;

animate() {
   distance = vantagePoint.distanceTo(camera.position);
   normalized = THREE.Math.smoothstep(distance, 5, 100); // Converts [1, 100] => [0, 1]

   // Resets the color on each frame
   startColor.set(0x0099ff);
   startColor.lerp(endColor, normalized);
}

你越接近 0，你就越接近看到头骨。然后，您可以使用该值更改 scene.background 的颜色。任何超过 10 的值，你就是 'cold'，当你接近 0 时，你会变得更热。

https://threejs.org/docs/#api/en/math/Vector3.distanceTo

更新：

然后您可以使用 Math.smoothstep(). Then interpolate the value of the colors with this normalized value using Color.lerp

将距离转换为 [0, 1] 范围内的归一化值

如何使用 OrbitControls.js 根据相机旋转影响背景亮度

How to affect background brightness based on camera rotation using OrbitControls.js

three.js

rotation

orientation

更新：