Cambiar el fondo de three.js a transparente u otro color

122

He estado tratando de cambiar lo que parece ser el color de fondo predeterminado de mi lienzo de negro a transparente / cualquier otro color, pero no tuve suerte.

Mi HTML:

<canvas id="canvasColor">

Mi CSS:

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

Como puede ver en el siguiente ejemplo en línea, tengo algunas animaciones adjuntas al lienzo, así que no puedo hacer una opacidad: 0; en la id.

Vista previa en vivo: http://devsgs.com/preview/test/particle/

¿Alguna idea de cómo sobrescribir el negro predeterminado?

css html canvas html5-canvas three.js usuario1231561
fuente
Al principio de function init() {, su lienzo es rojo! Three.js lo cambia a negro con setClearColorHex!
Simon Sarris el

Respuestas:

236

Me encontré con esto cuando comencé a usar three.js también. En realidad es un problema de JavaScript. Tu Actualmente tienes:

renderer.setClearColorHex( 0x000000, 1 );

en tu threejsfunción init. Cámbielo a:

renderer.setClearColorHex( 0xffffff, 1 );

Actualización: Gracias a HdN8 por la solución actualizada:

renderer.setClearColor( 0xffffff, 0);

Actualización n. ° 2: como señaló WestLangley en otra pregunta similar, ahora debe usar el código siguiente al crear una nueva instancia de WebGLRenderer junto con la setClearColor()función:

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

Actualización n. ° 3: Mr.doob señala que, como r78alternativa, puede usar el siguiente código para establecer el color de fondo de su escena:

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );
Joe
fuente
De hecho tienes razón. El lienzo es de hecho transparente pr. por defecto, así que lástima de mí. Muchas gracias por indicar dónde cambiar esto: ¡ahora se ve genial!
user1231561
55
Bien, esto también me molestó un poco. Encontré en el script three.js que este método pronto está en desuso, use setClearColor (0xffffff, 1) en su lugar.
HdN8
@ HdN8: gracias por la actualización, lo he agregado a la respuesta.
Joe
1
setClearColor (0xffffff, 1) no funcionó para mí (lo hizo blanco) pero setClearColor (0xffffff, 0) sí funcionó (lo hizo transparente)
Ronen Rabinovici
11
Ya r78que simplemente puedes hacerloscene.background = new THREE.Color( 0xff0000 );
mrdoob
21

Una respuesta completa: (Probado con r71)

Para establecer un color de fondo use:

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

Si desea un fondo transparente, primero deberá habilitar alfa en su renderizador:

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

Ver los documentos para más información.

Yotam Omer
fuente
3

Descubrí que cuando creé una escena a través del editor three.js, no solo tuve que usar el código de respuesta correcto (arriba), para configurar el renderizador con un valor alfa y el color claro, tuve que ingresar a la aplicación .json archivo y encontrar atributo "fondo" de la "escena" del objeto y ponerlo a: "background: null".

La exportación del editor Three.js lo tenía configurado originalmente como "fondo": 0

es decir, eso es
fuente
2

En 2020 usando r115 funciona muy bien con esto:

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

Ala oscura
fuente
-1

También me gustaría agregar que si usa el editor three.js, no olvide establecer el color de fondo para borrar también en el index.html.

background-color:#00000000
Ty Irvine
fuente