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

Question

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

Мой HTML:

<canvas id="canvasColor"> 

Мой CSS:

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

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

Live Preview: http://devsgs.com/preview/test/particle/

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

Answer 1

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

renderer.setClearColorHex(0x000000, 1); 

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

renderer.setClearColorHex(0xffffff, 1); 

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

renderer.setClearColor(0xffffff, 0); 

Update # 2: Как отметил WestLangley в another, similar question - теперь вы должны использовать ниже кода при создании нового экземпляра WebGLRenderer в сочетании с функцией setClearColor():

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

Update # 3: Mr.doob указывает на то, что, так как r78 вы можете альтернативно использовать код ниже, чтобы установить цвет фона вашей сцены:

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

Answer 2

Для прозрачности, это также является обязательным: renderer = new THREE.WebGLRenderer({ alpha: true }) через Transparent background with three.js

Answer 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 

View the docs для получения дополнительной информации.

Answer 4

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

Экспорт из трех.js editor был первоначально установлен на «background»: 0