Зміна фону three.js на прозорий або інший колір

122

Я намагався змінити кольори тла мого полотна за замовчуванням на чорний на прозорий / будь-який інший колір, але не пощастило.

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

Будь-які ідеї, як перезаписати чорний за замовчуванням?

— користувач1231561
джерело

На початку function init() {вашого полотна червоного кольору! Three.js змінює його на чорний setClearColorHex!

— Саймон Сарріс

236

Я натрапив на це, коли також почав використовувати три.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 );

— Джо
джерело

Ви справді праві. Полотно справді прозоре пр. за замовчуванням, так що мені соромно. Дуже дякую, що вказали, де це змінити - зараз це чудово виглядає!

— користувач1231561

5

Приємно, і це мене клопіло трохи. Я знайшов у скрипті three.js цей метод незабаром застарілий, замість цього використовуйте setClearColor (0xffffff, 1).

— HdN8

@ HdN8 - дякую за оновлення, я додав його до відповіді.

— Джо

1

setClearColor (0xffffff, 1) не працював для мене (зробив його білим), але setClearColor (0xffffff, 0) спрацював (зробив його прозорим)

— Ronen Rabinovici

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

Перегляньте документи для отримання додаткової інформації.

— Йотам Омер
джерело

20

Для прозорості це також є обов'язковим: renderer = new THREE.WebGLRenderer( { alpha: true } )через прозорий фон з three.js

— Пітер Ерліх
джерело

3

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

Експорт із редактора Three.js спочатку встановив його "background": 0

— іетатіс
джерело

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

— Тай Ірвін
джерело