透明背景与three.js

IT技术 javascript three.js transparent alpha
2021-03-10 04:55:34

代码有效,但我在使用three.js 为画布设置透明背景时遇到问题。我用:

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

但随后背景变黑。如何将其更改为透明?


代码:

   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();
3个回答

如果要在three.js 中实现透明背景,则需要将alpha参数传递WebGLRenderer构造函数。

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

您可以将透明颜色保留为默认值。

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

三.js r.71

截至 2020 年 8 月,此答案已过时,似乎不适用于 Threejs 的最新版本
2021-04-15 04:55:34
我在尝试之前发表了评论。现在我已经尝试过了,它看起来不像,但是我渲染的几何体真的很小。我问是因为我计划在更大的项目中使用它。无论如何,它似乎没有影响,或者至少与我的项目无关。
2021-04-22 04:55:34
这称为孤立。“只需粘贴此代码行”。在three.js 中经常找不到像这样容易的东西。多谢兄弟
2021-04-27 04:55:34
@tfrascaroli 你看到了吗?
2021-04-28 04:55:34
@WestLangley 使用这种技术时我们应该看到性能下降吗?是否引人注目?
2021-05-14 04:55:34

您还必须设置:scene.background = null;

三.js v124

这对我不起作用(three.js r129)。
2021-05-05 04:55:34
这帮助我达到了预期的结果,以及投票的答案。谢谢!
2021-05-12 04:55:34

可以使用以下代码实现透明背景。

scene.background = transparent;
这不可能是对的,对吗?transparent只是要引用一个不存在的名称——它基本上等同于scene.background = undefined;.
2021-05-02 04:55:34