Как повлиять на яркость фона на основе поворота камеры с помощью OrbitControls.js

Question

(Здравствуйте, это мой первый пост здесь)

вот что я хотел бы включить в этот простой пример :

1. Я бы хотел, чтобы фон постепенно превращался из светлого в темный, когда пользователь приближается к определенной ориентации - в этом случае (пример выше) желаемая ориентация представляет собой крутой угол так, чтобы ракурсное анаморфное изображение выглядело как обычноеskull (значение фона, указывающее угол, к которому должен стремиться пользователь - вроде как играть в Hot and Cold)

2. , когда пользователь достигает желаемой ориентации (тогда фонсоответственно 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

Обновление:

Затем вы можете преобразовать расстояние внормализованное значение в диапазоне [0, 1] с использованием Math.smoothstep().Затем интерполируйте значение цветов с этим нормализованным значением, используя Color.lerp