0

This is my first time working with three.js,

I found a codepen that I really like, but I'm having troubles changing the background colour.

I've taken a look at other questions asked on this topic, and tried adding { alpha: true} to the renderer = new THREE.WebGLRenderer(); as this post suggests: Transparent background with three.js

My goal is to create a transparent background on the <div class="page-content"></div> element.. I would really appreciate any help!

The codepen: https://codepen.io/ramsaylanier/pen/raybzy

Peter O.
  • 32,158
  • 14
  • 82
  • 96
j roc
  • 156
  • 3
  • 5
  • 23

3 Answers3

3

I think there are a couple things missing there:

  1. You do need alpha: true on the scene, as you mention.
  2. Don't change setClearColor.
  3. If you're using EffectComposer, there is some extra work required to make it allow a transparent background, see these comments. How do I stop EffectComposer from destroying my transparent background?

I'd recommend starting with renderer.render( scene, camera ) instead of composer.render() just to make sure you have the first two parts working.

Don McCurdy
  • 10,975
  • 2
  • 37
  • 75
0

new THREE.WebGLRenderer({ canvas: canvas,

 preserveDrawingBuffer: true,  // so canvas.toBlob() make sense

alpha:true,   // so png background is transparent

})

xosg
  • 89
  • 1
  • 6
0

If it still doesn't work after doing this, make sure you are not changing the background of the scene!

Asadbek Eshboev
  • 101
  • 5