Solución:
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 tus threejs función init. Cámbielo a:
renderer.setClearColorHex( 0xffffff, 1 );
Actualizar: 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 siguiente código al crear una nueva instancia de WebGLRenderer junto con el setClearColor() función:
var renderer = new THREE.WebGLRenderer({ alpha: true });
Actualización n. ° 3: El señor doob señala que desde r78 alternativamente, 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 );
Una respuesta completa: (probado con r71)
Para establecer un color de fondo, utilice:
renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color
Si desea un fondo transparente, primero deberá habilitar alpha en su renderizador:
renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent
Consulte los documentos para obtener más información.
Por transparencia, esto también es obligatorio: renderer = new THREE.WebGLRenderer( { alpha: true } ) a través de fondo transparente con three.js