Cambiare lo sfondo di three.js in trasparente o in un altro colore

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

Il mio HTML:

<canvas id="canvasColor">

Il mio CSS:

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

Come puoi vedere nel seguente esempio online, ho alcune animazioni aggiunte alla tela, quindi non posso semplicemente fare 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 usare anche three.js. In realtà è un problema di javascript. Attualmente hai:

renderer.setClearColorHex( 0x000000, 1 );

nella tua threejsfunzione init. Modificalo 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 seguente quando crei una nuova istanza WebGLRenderer insieme alla setClearColor()funzione:

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

Aggiornamento n. 3: Mr.doob sottolinea che poiché in r78alternativa è possibile utilizzare il codice seguente per impostare il colore di sfondo della scena:

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

Una risposta completa: (testato con r71)

Per impostare un colore di sfondo usa:

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

Se vuoi uno sfondo trasparente dovrai prima abilitare l'alfa 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.

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

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 file di .json e trovare l'attributo "background" del oggetto "Scene" e impostarlo su: "background: null".

L'esportazione dall'editor di Three.js aveva originariamente impostato su "background": 0

Nel 2020 utilizzando r115 funziona molto bene con questo:

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

Vorrei anche aggiungere che se si utilizza l'editor three.js, non dimenticare di impostare il colore di sfondo su chiaro anche in index.html.

background-color:#00000000