Меняю три.фон js до прозрачного или другого цвета

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

мой HTML:

<canvas id="canvasColor">

мой CSS:

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

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

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

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

5 87
css html5 three.js canvas html5-canvas

5 ответов:

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

renderer.setClearColorHex( 0x000000, 1 );

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

renderer.setClearColorHex( 0xffffff, 1 );

обновление: спасибо HdN8 за обновленное решение:

renderer.setClearColor( 0xffffff, 0);

обновление #2: как указал Уэстленгли в еще один, похожий вопрос - теперь вы должны использовать приведенный ниже код при создании нового WebGLRenderer экземпляр в сочетании с setClearColor() функция:

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

обновление #3: г-н дуб указывает, что с r78 вы также можете использовать код ниже, чтобы установить цвет фона сцены:

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

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

17

полный ответ: (проверено с помощью 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

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

14

Я обнаружил, что когда я создал сцену через три.JS editor, я не только должен был использовать код правильного ответа (выше), чтобы настроить рендерер с Альфа-значением и четким цветом, я должен был войти в приложение.JSON-файл и найдите атрибут "фон" объекта "сцена" и установите его в значение: "background: null".

экспорт из трех.редактор js изначально установил его в "фон": 0

1

Я также хотел бы добавить, что при использовании трех.JS редактор не забудьте установить цвет фона, чтобы очистить, а также в индексе.формат html.

background-color:#00000000
0