Zmiana koloru tła three.js na przezroczysty lub inny

122

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 online, mam dołączoną animację do płótna, więc nie mogę po prostu wykonać krycia: 0; na dowodzie tożsamości.

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

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

css html canvas html5-canvas three.js user1231561
źródło
Na początku function init() {twoje płótno jest czerwone! Three.js zmienia go na czarny z setClearColorHex!
Simon Sarris,

Odpowiedzi:

237

Natknąłem się na to, kiedy zacząłem używać three.js. W rzeczywistości jest to problem z javascriptem. Obecnie masz:

renderer.setClearColorHex( 0x000000, 1 );

w twojej threejsfunkcji init. Zmień to na:

renderer.setClearColorHex( 0xffffff, 1 );

Aktualizacja: Dzięki HdN8 za zaktualizowane rozwiązanie:

renderer.setClearColor( 0xffffff, 0);

Aktualizacja # 2: Jak wskazał WestLangley w innym, podobnym pytaniu - musisz teraz użyć poniższego kodu podczas tworzenia nowej instancji WebGLRenderer w połączeniu z setClearColor()funkcją:

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

Aktualizacja # 3: Mr.doob zwraca uwagę, że ponieważ r78możesz alternatywnie 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 );
Joe
źródło
Naprawdę masz rację. Płótno jest rzeczywiście przezroczyste. domyślnie, więc wstyd mi. Wielkie dzięki za wskazanie, gdzie to zmienić - teraz wygląda świetnie!
user1231561
5
Fajnie, to mnie też trochę wkurzyło. Znalazłem w skrypcie three.js, że ta metoda jest wkrótce przestarzała, zamiast tego użyj setClearColor (0xffffff, 1).
HdN8,
@ HdN8 - dzięki za aktualizację, dodałem do odpowiedzi.
Joe
1
setClearColor (0xffffff, 1) nie działał dla mnie (uczynił go białym), ale setClearColor (0xffffff, 0) działał (uczynił go przezroczystym)
Ronen Rabinovici
11
Ponieważ r78możesz po prostu to zrobićscene.background = new THREE.Color( 0xff0000 );
mrdoob
21

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ć alfa w swoim rendererze:

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

Zobacz dokumentację, aby uzyskać więcej informacji.

Yotam Omer
źródło
3

Odkryłem, że kiedy tworzyłem scenę za pomocą edytora three.js, musiałem nie tylko użyć poprawnego kodu odpowiedzi (powyżej), aby ustawić renderer z wartością alfa i wyraźnym kolorem, musiałem przejść do aplikacji .json plik i znaleźć atrybut „tle” „scenę” obiekt i ustawić go na adres: "background: null".

Eksport z edytora Three.js miał pierwotnie ustawione na „tło”: 0

iethatis
źródło
3

W 2020 roku przy użyciu r115 działa bardzo dobrze z tym:

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

Darkwing
źródło
-1

Chciałbym również dodać, że jeśli używasz edytora three.js, nie zapomnij ustawić koloru tła na wyczyść również w pliku index.html.

background-color:#00000000
Ty Irvine
źródło