Three.js дымовая анимация с прозрачным фоном

Question

Я совершенно новичок в three.js, я бы хотел, чтобы дымовой холст поверх изображения имел прозрачный фон. сейчас холст находится за изображением, поэтому у меня есть этот CSS ниже.

canvas{ 
    position: absolute;
    z-index: 2;
    top:0px;
    left: 0;
}

Не понимаю, как убрать или сделать черный фон холста прозрачным. Пожалуйста, посмотрите мою демонстрацию ниже

https://codepen.io/davide77/pen/GxZgZB?editors=1010

javascript three.js

0

DDfrontenderLover 14 Мар 2018 в 17:08

Answer 1

Если вам нужен прозрачный фон, вы можете передать параметр alpha в конструктор WebGLRenderer.

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

https://threejs.org/docs/#api/renderers/WebGLRenderer

1

Fasani 14 Мар 2018 в 14:46

Answer 2

Для этого можно использовать scene.background. Нет необходимости работать с дополнительным элементом HTML. Просто сделать:

scene.background = texture;

https://codepen.io/anon/pen/OvNVmy

1

Mugen87 14 Мар 2018 в 14:40

Three.js дымовая анимация с прозрачным фоном

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript