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?

— usuario1231561
fuente

Al principio de function init() {, su lienzo es rojo! Three.js lo cambia a negro con setClearColorHex!

— Simon Sarris el

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

20

Para la transparencia, esto también es obligatorio: a renderer = new THREE.WebGLRenderer( { alpha: true } )través de fondo transparente con three.js

— Peter Ehrlich
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