Ändern des Hintergrunds von three.js in eine transparente oder andere Farbe

122

Ich habe versucht, die Standardhintergrundfarbe meiner Leinwand von Schwarz auf Transparent / jede andere Farbe zu ändern - aber kein Glück.

Mein HTML:

<canvas id="canvasColor">

Mein CSS:

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

Wie Sie im folgenden Online-Beispiel sehen können, habe ich eine Animation an die Leinwand angehängt, daher kann ich nicht einfach eine Deckkraft machen: 0; auf der ID.

Live-Vorschau: http://devsgs.com/preview/test/particle/

Irgendwelche Ideen, wie man das Standardschwarz überschreibt?

css html canvas html5-canvas three.js user1231561
quelle
Zu Beginn function init() {ist deine Leinwand rot! Three.js ändert es in schwarz mit setClearColorHex!
Simon Sarris

Antworten:

236

Ich bin darauf gestoßen, als ich anfing, auch three.js zu verwenden. Es ist eigentlich ein Javascript-Problem. Zur Zeit haben Sie:

renderer.setClearColorHex( 0x000000, 1 );

in Ihrer threejsInit-Funktion. Ändern Sie es in:

renderer.setClearColorHex( 0xffffff, 1 );

Update: Danke an HdN8 für die aktualisierte Lösung:

renderer.setClearColor( 0xffffff, 0);

Update Nr. 2: Wie WestLangley in einer anderen, ähnlichen Frage ausgeführt hat, müssen Sie jetzt den folgenden Code verwenden, wenn Sie eine neue WebGLRenderer-Instanz in Verbindung mit der setClearColor()Funktion erstellen :

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

Update Nr. 3: Mr.doob weist darauf hin, dass r78Sie alternativ den folgenden Code verwenden können, um die Hintergrundfarbe Ihrer Szene festzulegen :

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );
Joe
quelle
Sie haben in der Tat recht. Die Leinwand ist in der Tat transparent pr. Standard, also Schande über mich. Vielen Dank, dass Sie darauf hingewiesen haben, wo Sie dies ändern können - es sieht jetzt großartig aus!
user1231561
5
Schön, das hat mich auch ein bisschen nervt. Ich habe im Skript three.js festgestellt, dass diese Methode bald veraltet ist. Verwenden Sie stattdessen setClearColor (0xffffff, 1).
HdN8
@ HdN8 - danke für das Update, ich habe es der Antwort hinzugefügt.
Joe
1
setClearColor (0xffffff, 1) hat bei mir nicht funktioniert (weiß gemacht), aber setClearColor (0xffffff, 0) hat funktioniert (transparent gemacht)
Ronen Rabinovici
11
Da können r78Sie einfach tunscene.background = new THREE.Color( 0xff0000 );
mrdoob
21

Eine vollständige Antwort: (Getestet mit r71)

So stellen Sie eine Hintergrundfarbe ein:

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

Wenn Sie einen transparenten Hintergrund wünschen, müssen Sie zuerst Alpha in Ihrem Renderer aktivieren:

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

Weitere Informationen finden Sie in den Dokumenten .

Yotam Omer
quelle
3

Ich stellte fest, dass ich beim Erstellen einer Szene über den three.js-Editor nicht nur den richtigen Antwortcode (oben) verwenden musste, um den Renderer mit einem Alpha-Wert und der klaren Farbe einzurichten, sondern auch in die App gehen musste .json-Datei und suchen Sie das "Hintergrund" -Attribut des "Szene" -Objekts und setzen Sie es auf : "background: null".

Beim Export aus dem Three.js-Editor wurde ursprünglich "Hintergrund" festgelegt: 0

iethatis
quelle
2

Im Jahr 2020 mit r115 funktioniert es sehr gut damit:

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

Dunkler Flügel
quelle
-1

Ich möchte auch hinzufügen, dass Sie bei Verwendung des three.js-Editors nicht vergessen, die Hintergrundfarbe auch in der index.html so einzustellen, dass sie gelöscht wird.

background-color:#00000000
Ty Irvine
quelle