Fond transparent avec three.js

113

Le code fonctionne, mais j'ai un problème pour définir un arrière-plan transparent sur le canevas avec three.js. J'utilise:

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

Mais alors le fond devient noir. Comment le changer pour qu'il soit transparent?


Le code:

   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
la source

Réponses:

232

Si vous voulez un arrière-plan transparent dans three.js, vous devez transmettre le alphaparamètre au WebGLRendererconstructeur.

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

Vous pouvez laisser la couleur claire à la valeur par défaut.

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

three.js r.71

WestLangley
la source
@WestLangley Devrions-nous voir une baisse des performances lors de l'utilisation de cette technique? Est-ce perceptible?
tfrascaroli
1
@tfrascaroli Vous en avez vu un?
WestLangley
J'ai posté le commentaire avant d'essayer. Maintenant que je l'ai essayé, cela ne lui ressemble pas, mais la géométrie que je suis en train de rendre est vraiment petite. Je demandais parce que je prévoyais de l'utiliser dans des projets plus importants. Quoi qu'il en soit, cela ne semble pas avoir d'impact, ou du moins n'est pas pertinent dans mon projet.
tfrascaroli
2
cela s'appelle une solition. "collez simplement cette ligne de code". Ne pas trouver la chose facile comme ça souvent dans three.js. merci bro
messerbill
@WestLangley Comment puis-je définir une image d'arrière-plan avec un effet de shader? VolumetericLightShader stackoverflow.com/questions/46864037/…
souligné