Изменение фона three.js на прозрачный или другой цвет

Я пытаюсь изменить то, что по умолчанию является фоновым цветом по умолчанию моего холста от черного до прозрачного/любого другого цвета - но не удачи.

Мой HTML:

<canvas id="canvasColor">

Мой CSS:

<style type="text/css">
#canvasColor {
 z-index: 998;
opacity:1;
background: red;
}
</style>

Как вы можете видеть в следующем онлайн-примере, у меня есть анимация, прикрепленная к холсту, поэтому не могу сделать непрозрачность: 0; на идентификаторе.

Предварительный просмотр в прямом эфире: http://devsgs.com/preview/test/particle/

Любые идеи о том, как перезаписать черный цвет по умолчанию?

Ответы

Ответ 1

Я наткнулся на это, когда начал использовать тр .js. Это на самом деле проблема с javascript. У вас есть:

renderer.setClearColorHex( 0x000000, 1 );

в вашей функции threejs init. Измените его на:

renderer.setClearColorHex( 0xffffff, 1 );

Обновление: Благодаря HdN8 для обновленного решения:

renderer.setClearColor( 0xffffff, 0);

Обновление № 2: Как отметил WestLangley в другой, аналогичный вопрос - теперь вы должны использовать приведенный ниже код при создании нового Экземпляр WebGLRenderer в сочетании с функцией setClearColor():

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

Обновление № 3: Mr.doob указывает, что с r78 вы также можете использовать код ниже для установки цвета фона сцены:

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );

Ответ 3

Полный ответ: (Протестировано с помощью r71)

Для установки цвета фона используйте:

renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color

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

renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent

Просмотрите документы для получения дополнительной информации.

Ответ 4

Я обнаружил, что когда я создал сцену через редактор three.js, мне не только пришлось использовать правильный код ответа (см. выше), чтобы настроить рендер с альфа-значением и четким цветом, мне пришлось идти в файл app.json и найдите атрибут "Background" объекта "Сцена" и установите его: "background: null".

Экспорт из редактора Three.js изначально был установлен на "background": 0