wake-up-neo.com

Der Hintergrund von three.js wird in eine transparente oder andere Farbe geändert

Ich habe versucht, die scheinbar voreingestellte Hintergrundfarbe 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, so dass Sie nicht einfach eine Deckkraft verwenden können: 0; auf der id.

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

Irgendwelche Ideen, wie man das Standardschwarz überschreibt?

csshtml5canvashtml5-canvasthree.js
97
user1231561

Ich bin auf dieses Problem gestoßen, als ich gleich mit three.js angefangen habe. Es ist eigentlich ein Javascript-Problem. Du hast im Moment: 

renderer.setClearColorHex( 0x000000, 1 );

in Ihrer threejs init-Funktion. Ändern Sie es in:

renderer.setClearColorHex( 0xffffff, 1 );

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

renderer.setClearColor( 0xffffff, 0);

Update # 2: Wie von WestLangley in einer anderen, ähnlichen Frage - darauf hingewiesen, 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 # 3: Mr.doob weist darauf hin, dass Sie seit r78 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 );
202
Joe

Für Transparenz ist dies ebenfalls zwingend: renderer = new THREE.WebGLRenderer( { alpha: true } ) via Transparenter Hintergrund mit three.js

17
Peter Ehrlich

Eine vollständige Antwort: (Mit r71 getestet)

Um eine Hintergrundfarbe festzulegen, verwenden Sie:

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

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

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

Sehen Sie sich die Dokumente an für weitere Informationen.

15
Yotam Omer

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

Beim Export aus dem Three.js-Editor war es ursprünglich auf "Hintergrund" gesetzt: 0

1
iethatis

Ich möchte auch hinzufügen, dass bei Verwendung des three.js-Editors die Hintergrundfarbe in der index.html ebenfalls auf clear gesetzt wird.

background-color:#00000000
0
Ty Irvine