Question

（您好，这是我的第一个帖子）

这是我想在此simple example中加入的内容：

当用户更靠近特定方向时，我想使背景逐渐从亮变为暗–在这种情况下（上面的示例），所需的方向是一个陡峭的角度，因此可以缩短变形的图像看起来像是普通的头骨（背景值表示用户应瞄准的角度–有点像在玩“冷热”游戏）
当用户达到所需的方向（背景相应地为100％暗）时，我希望它锁定旋转并在背景或弹出窗口中触发视频文件。

我认为这与访问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的任何事物都会“冷”，接近0时温度会升高。

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

更新：

然后可以使用Math.smoothstep()将距离转换为[0, 1]范围内的归一化值。然后使用Color.lerp

使用此归一化值对颜色值进行插值

如何使用OrbitControls.js基于相机旋转来影响背景亮度

1 个答案:

更新：