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

123

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

Мой 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/

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

css html canvas html5-canvas three.js user1231561
источник
В начале function init() {ваш холст красный! Three.js меняет его на черный с помощью setClearColorHex!
Саймон Саррис

Ответы:

238

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

renderer.setClearColorHex( 0x000000, 1 );

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

renderer.setClearColorHex( 0xffffff, 1 );

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

renderer.setClearColor( 0xffffff, 0);

Обновление №2: как указал WestLangley в другом аналогичном вопросе - теперь вы должны использовать приведенный ниже код при создании нового экземпляра 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 );
Джо
источник
Вы действительно правы. Полотно действительно прозрачное пр. по умолчанию, так что позор мне. Большое спасибо за то, что указали, где это изменить - теперь это выглядит отлично!
user1231561
5
Хорошо, это меня тоже немного беспокоило. Я обнаружил, что в сценарии three.js этот метод скоро устарел, используйте вместо него setClearColor (0xffffff, 1).
HdN8 09
@ HdN8 - спасибо за обновление, добавил в ответ.
Джо
1
setClearColor (0xffffff, 1) не сработал для меня (сделал его белым), но setClearColor (0xffffff, 0) действительно работал (сделал его прозрачным)
Ронен Рабинович
11
Поскольку r78вы можете просто сделатьscene.background = new THREE.Color( 0xff0000 );
mrdoob
21

Полный ответ: (Проверено на 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

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

Йотам Омер
источник
3

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

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

iethatis
источник
3

В 2020 году с использованием r115 он очень хорошо работает с этим:

const renderer = new THREE.WebGLRenderer({ alpha: true }); const scene = new THREE.Scene(); scene.background = null;

Darkwing
источник
-1

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

background-color:#00000000
Тай Ирвин
источник