透明代码不适用于 Three.js

Question

我搜索并尝试了一些关于它的答案，但它不起作用。

我试过这样：

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

和

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

正如我所说，它不起作用我只是看到黑屏：/

这是我的“初始化”函数：

function init() {
  var root = new THREERoot({
    createCameraControls:false,
		antialias: true,
    fov:60
  });
  root.renderer.setClearColor(0xffffff);
  root.renderer.setPixelRatio(window.devicePixelRatio || 1);
  root.camera.position.set(0, 0, 400);

  var textAnimation = createTextAnimation();
  textAnimation.position.y = -40;
  root.scene.add(textAnimation);

  var tl = new TimelineMax({
    repeat:-1,
    repeatDelay:0.25,
    yoyo:true
  });
  tl.fromTo(textAnimation, 4,
    {animationProgress:0.0},
    {animationProgress:1.0, ease:Power1.easeInOut},
    0
  );

  createTweenScrubber(tl);
}

这就是我正在使用的：

https://codepen.io/zadvorsky/pen/xVrMMO

Answer 1

为了让你的 Three.js 项目透明，你需要将它的渲染器的 alpha 参数设置为 true：

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

这样，不呈现任何内容的部分将显示您的 HTML 页面的背景，因此如果您的 HTML 背景是#ff0000，那么您应该看到红色。

但是，您实际上是在执行时禁用了透明度

  root.renderer.setClearColor(0xffffff);

这条线在每一帧上绘制一个白色背景，这意味着它不再透明。

另外，我看不到您的renderer.render(scene, camera); 行，因为您的代码示例的范围太窄了。