CODEWITHSUNDEEP
javascriptthree.js
Reira
Reira

Reputation: 21

Transparent code does not working on Three.js

I searched and tried some answers about it but it doesn't work.

i tried like this:

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

and

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

as i said it does not work i just saw black screen :/

here is my "init" function :

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);
}

this is what i am using :

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

Upvotes: 1

Views: 322

Answers (1)

M -
M -

Reputation: 28502

In order for your Three.js project to be transparent, you need to set its renderer's alpha parameter to true:

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

This way, the parts that don't render anything will show the background of your HTML page, so if your HTML background is #ff0000, then you should see red.

However, you're essentially disabling the transparency when you perform

  root.renderer.setClearColor(0xffffff);

This line paints a white background on every frame, which means it's no longer transparent.

Also, I can't see your renderer.render(scene, camera); line, because your code example is so narrow in scope.

Upvotes: 1

Related Questions