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

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?

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 );

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 .

Für die Transparenz ist dies ebenfalls obligatorisch: renderer = new THREE.WebGLRenderer( { alpha: true } )über den transparenten Hintergrund mit three.js

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

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;

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