Fondo transparente con three.js

113

El código funciona, pero tengo problemas para configurar un fondo transparente en el lienzo con three.js. Yo suelo:

Background.renderer.setClearColor(0xffffff, 0);

Pero luego el fondo se vuelve negro. ¿Cómo lo cambio para que sea transparente?


El código:

   var camera, scene, renderer;
   var mouseX = 0, mouseY = 0;
   var p;

   var windowHalfX = site.Width / 2;
   var windowHalfY = site.Height / 2;

   Background.camera = new THREE.PerspectiveCamera( 35, site.Width / site.Height, 1, 2000 );
   Background.camera.position.z = 300;
   //camera.position.y = 200;

   // scene
   Background.scene = new THREE.Scene();

   // texture
   var manager = new THREE.LoadingManager();
   manager.onProgress = function ( item, loaded, total ) {
      console.log('webgl, twice??');
      //console.log( item, loaded, total );
   };


   // particles
   var p_geom = new THREE.Geometry();
   var p_material = new THREE.ParticleBasicMaterial({
      color: 0xFFFFFF,
      size: 1
   });

   // model
   var loader = new THREE.OBJLoader( manager );
   loader.load( site.base_url + '/assets/models/head.obj', function ( object ) {

      object.traverse( function ( child ) {

         if ( child instanceof THREE.Mesh ) {

            // child.material.map = texture;

            var scale = 6;

            $(child.geometry.vertices).each(function() {
               p_geom.vertices.push(new THREE.Vector3(this.x * scale, this.y * scale, this.z * scale));
            })
         }
      });

      Background.scene.add(p)
   });

   p = new THREE.ParticleSystem(
      p_geom,
      p_material
   );

   Background.renderer = new THREE.WebGLRenderer();
   Background.renderer.setSize( site.Width, site.Height );
   Background.renderer.setClearColor(0xffffff, 0);

   $('.particlehead').append(Background.renderer.domElement);
   $('#content').on('mousemove', onDocumentMouseMove);
   site.window.on('resize', onWindowResize);

   function onWindowResize() {
      windowHalfX = site.Width / 2;
      windowHalfY = site.Height / 2;
      //console.log(windowHalfX);

      Background.camera.aspect = site.Width / site.Height;
      Background.camera.updateProjectionMatrix();

      Background.renderer.setSize( site.Width, site.Height );
   }

   function onDocumentMouseMove( event ) {
      mouseX = ( event.clientX - windowHalfX ) / 2;
      mouseY = ( event.clientY - windowHalfY ) / 2;
      //console.log(mouseX)
   }

   Background.animate = function() { 

      //console.log('animate2');
      Background.ticker = TweenMax.ticker;
      Background.ticker.addEventListener("tick", Background.animate);

      render();
   }

   function render() {
      Background.camera.position.x += ( (mouseX * .5) - Background.camera.position.x ) * .05;
      Background.camera.position.y += ( -(mouseY * .5) - Background.camera.position.y ) * .05;

      Background.camera.lookAt( Background.scene.position );

      Background.renderer.render( Background.scene, Background.camera );
   }

   render();
Robert Bue
fuente

Respuestas:

232

Si desea un fondo transparente en three.js, debe pasar el alphaparámetro al WebGLRendererconstructor.

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

Puede dejar el color claro en el valor predeterminado.

renderer.setClearColor( 0x000000, 0 ); // the default

three.js r.71

WestLangley
fuente
@WestLangley ¿Deberíamos ver una caída en el rendimiento al usar esta técnica? ¿Se nota?
tfrascaroli
1
@tfrascaroli ¿Viste uno?
WestLangley
Publiqué el comentario antes de intentarlo. Ahora que lo he probado, no lo parece, pero la geometría que estoy renderizando es realmente pequeña. Estaba preguntando porque estaba planeando usar esto en proyectos más grandes. De todos modos, no parece tener impacto, o al menos no es relevante dentro de mi proyecto.
tfrascaroli
2
esto se llama solición. "simplemente pegue esta línea de código". No encontrar algo tan fácil como esto a menudo en three.js. gracias hermano
messerbill
@WestLangley ¿cómo puedo configurar una imagen de fondo con efecto de sombreado? VolumetericLightShader stackoverflow.com/questions/46864037/…
subrayado