Zmieniam trzy.tło js do przezroczystego lub innego koloru

Próbowałem zmienić domyślny kolor tła mojego płótna z czarnego na przezroczysty / dowolny inny kolor - ale bez powodzenia.

Mój HTML: 

<canvas id="canvasColor">

Mój CSS: 

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

Jak widać w poniższym przykładzie internetowym dodałem animację do obszaru roboczego, więc nie mogę po prostu zrobić krycia: 0; Na id.

Podgląd na żywo: http://devsgs.com/preview/test/particle/

Jakieś pomysły, jak zastąpić domyślną czerń?

Author: Joe, 2013-04-23
Source

5 answers

Natknąłem się na to, kiedy zacząłem używać trzech.js również. To właściwie problem z javascript. Aktualnie posiadasz: 

renderer.setClearColorHex( 0x000000, 1 );

W Twojej threejs funkcji init. Zmień na: 

renderer.setClearColorHex( 0xffffff, 1 );

Aktualizacja: podziękowania dla HdN8 za zaktualizowane rozwiązanie: 

renderer.setClearColor( 0xffffff, 0);

Update # 2: Jak zauważył WestLangley w inne, podobne pytanie - musisz teraz użyć poniższego kodu podczas tworzenia nowej instancji WebGLRenderer w połączeniu z setClearColor() funkcja: 

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

Update #3: Pan doob zwraca uwagę, że od r78 Możesz również użyć poniższego kodu, aby ustawić kolor tła sceny: 

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );
 188
Author: Joe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:39

Dla przejrzystości jest to również obowiązkowe: renderer = new THREE.WebGLRenderer( { alpha: true } ) poprzez przezroczyste tło z trzema.js

 17
Author: Peter Ehrlich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:39

Pełna odpowiedź: (testowane z r71)

Aby ustawić kolor tła użyj: 

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

Jeśli chcesz mieć przezroczyste tło, musisz najpierw włączyć alpha w rendererze: 

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

Zobacz dokumenty , aby uzyskać więcej informacji.

 14
Author: Yotam Omer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-13 14:42:40

Odkryłem to, gdy stworzyłem scenę za pośrednictwem trójki.edytor js, nie tylko musiałem użyć poprawnego kodu odpowiedzi (powyżej), aby ustawić Renderer z wartością alfa i czystym kolorem, musiałem wejść do aplikacji.pliku json i znajdź atrybut" Tło "obiektu" scena " i ustaw go na: "background: null".

Eksport z trzech.js editor miał pierwotnie ustawione na "background": 0

 1
Author: iethatis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-19 18:54:58

([1]} chciałbym też dodać, że jeśli korzystamy z trzechedytor js nie zapomnij ustawić koloru tła na Wyczyść, jak również w indeksie.html.

background-color:#00000000
 0
Author: Ty Irvine,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-14 03:27:01