Есть ли способ контролировать непрозрачность scene.background в THREE.js?

Question

В этом примере я хотел бы иметь видео-фон, который становится видимым, только когда камера находится в определенном положении (для этого сейчас это обозначается цветом фона, становящимся черным)Можно ли заставить его работать вместо от белого до черного с точки зрения фиксированных HEX непрозрачных цветов до от белого до прозрачного , чтобы он мог показать, например, последовательность фоновых изображений / видео, используя CSS??Я уверен, что это довольно странный и некорректный способ решения этой проблемы, но я пробую разные подходы.Вот еще один один Любые предложения / объяснения с благодарностью!

Answer 1

К сожалению, scene.background можно установить только для цвета, текстуры или куба , что означает, что по умолчанию он не может быть прозрачным.

Однако средство визуализации имеет атрибут alpha, который позволяет выполнять рендеринг с прозрачностью, когда нет scene.background для покрытия прозрачных частей.Имея это в виду, вы можете сделать что-то вроде этого:

var renderer = new THREE.WebGLRenderer({
    alpha: true
});

function cameraInPosition() {
    // Removes the colored background
    // allowing you to see video behind the canvas
    scene.background = null;

    // Play whatever video you've placed behind canvas
    playVideoOrSomething();
}

Он перейдет с непрозрачного фона на прозрачный, но вы сможете увидеть видео за холстом.