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?


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 );

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.



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


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;


-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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.