Modifica dello sfondo three.js in trasparenza o altro colore

Ho cercato di cambiare quello che sembra essere il colore di sfondo predefinito della mia canvas, da nero a trasparente / qualsiasi altro colore, ma senza fortuna.

Il mio HTML:

 

Il mio CSS:

  #canvasColor { z-index: 998; opacity:1; background: red; }  

Come puoi vedere nel seguente esempio online, ho aggiunto un’animazione alla canvas, quindi non posso fare solo un’opacità: 0; sull’id.

Anteprima dal vivo: http://devsgs.com/preview/test/particle/

Qualche idea su come sovrascrivere il nero predefinito?

Mi sono imbattuto in questo quando ho iniziato a utilizzare anche three.js. In realtà è un problema javascript. Attualmente hai:

 renderer.setClearColorHex( 0x000000, 1 ); 

nella tua funzione init di threejs . Cambiarlo in:

 renderer.setClearColorHex( 0xffffff, 1 ); 

Aggiornamento: grazie a HdN8 per la soluzione aggiornata:

 renderer.setClearColor( 0xffffff, 0); 

Aggiornamento n. 2: come sottolineato da WestLangley in un’altra domanda simile : ora devi utilizzare il codice sottostante quando crei una nuova istanza di WebGLRenderer in combinazione con la funzione setClearColor() :

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

Aggiornamento n. 3: Mr.doob sottolinea che dal momento che r78 è ansible utilizzare in alternativa il codice sottostante per impostare il colore di sfondo della scena:

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

Per trasparenza, anche questo è obbligatorio: renderer = new THREE.WebGLRenderer( { alpha: true } ) tramite sfondo trasparente con three.js

Una risposta completa: (Testato con r71)

Per impostare un colore di sfondo utilizzare:

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

Se vuoi uno sfondo trasparente devi prima abilitare alpha nel tuo renderer:

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

Visualizza i documenti per maggiori informazioni.

Ho scoperto che quando ho creato una scena tramite l’editor three.js, non solo dovevo usare il codice della risposta corretta (sopra), per impostare il renderer con un valore alfa e il colore chiaro, dovevo andare nell’app .json e trovare l’attributo “background” dell’object “Scenario” e impostarlo su: "background: null" .

L’esportazione dall’editor Three.js l’aveva originariamente impostata su “background”: 0