Zmienianie tła three.js na przezroczysty lub inny kolor

Question

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

Moje HTML:

<canvas id="canvasColor"> 

Moje CSS:

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

Jak widać na poniższym przykładzie internetowego Mam kilka animacji dołączone do płótna, więc nie mogę po prostu zrobić krycie: 0 ; na id.

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

Wszelkie pomysły jak zastąpić domyślny black?

Answer 1

Natknąłem się na to, gdy zacząłem również używać three.js. To w rzeczywistości problem z javascript. Aktualnie masz:

renderer.setClearColorHex(0x000000, 1); 

w twojej funkcji inicjującej threejs. Zmień go na adres:

renderer.setClearColorHex(0xffffff, 1); 

Aktualizacja: Dzięki HdN8 dla zaktualizowanego rozwiązania:

renderer.setClearColor(0xffffff, 0); 

Aktualizacja # 2: Jak podkreślił WestLangley w another, similar question - trzeba teraz skorzystaj z poniższego kod podczas tworzenia nowej instancji WebGLRenderer w połączeniu z funkcją setClearColor():

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

Aktualizacja # 3: Mr.doob zwraca uwagę, że od r78 można alternatywnie użyć kodu poniżej, aby ustawić scenę na kolor tła:

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

Answer 2

Dla przejrzystości, jest również obowiązkowe: renderer = new THREE.WebGLRenderer({ alpha: true }) poprzez Transparent background with three.js

Answer 3

pełną odpowiedź: (Testowane z R71)

Aby ustawić użycie koloru tła:

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

Jeśli chcesz przezroczyste tło trzeba będzie włączyć alfa w renderujący pierwszy:

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

View the docs aby uzyskać więcej informacji.

Answer 4

Znalazłem, że kiedy stworzyłem scenę za pomocą edytora three.js, nie tylko musiałem użyć poprawnego kodu odpowiedzi (powyżej), aby skonfigurować renderer z wartością alfa i jasnym kolorem, musiałem przejdź do pliku app.json i znajdź atrybut "Tło" obiektu "Scena" i ustaw go na: "background: null".

Eksport z Three.edytor js miał pierwotnie ustawiony na "background": 0