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.
  • 30,765
  • 14
  • 76
  • 91
j roc
  • 127
  • 1
  • 3
  • 14

1 Answers1

2

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
  • 9,364
  • 1
  • 29
  • 61