Question

我进行了搜索并尝试了一些答案，但这没有用。

我这样尝试过：

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

和

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

正如我所说的那样，我只看到黑屏：/

这是我的“ init”函数：

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);行，因为您的代码示例范围如此狭窄。

透明代码不适用于Three.js

1 个答案: