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

Question

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

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

1. Я бы хотел, чтобы фон постепенно поворачивался от светлого к темному, когда пользователь приближается к определенной ориентации - в этом случае (пример выше) желаемая ориентация представляет собой крутой угол, так что анаморфное изображение в ракурсе выглядит как обычный череп (значение фона, указывающее угол, к которому должен стремиться пользователь - вроде как играет в Hot и 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/

Обновить:

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