0

I have a CubeTextureLoader in my threejs website to show some clouds as skybox: I'm trying to render them with a png, but they're still black and white. This is my renderer

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, autoClear: true });

How can I have a skybox with alpha?

Thanks in advance, Simone

Simone Moschetta
  • 33
  • 4
  • You'll need to generate your cube in a way similar to [this answer](https://stackoverflow.com/a/17490366/367865). Use `BoxGeometry` instead. You'll also need to turn it inside-out, by [setting the material sided-ness](https://stackoverflow.com/a/19825130/367865), since you're using it as a skybox. – Ouroborus Jun 30 '19 at 08:35
  • Thanks @Ouroborus, it works!! This is the code just if someone need `let cube = new THREE.BoxGeometry(5, 5, 5); let texCloud = new THREE.TextureLoader().load('assets/3D/sky/clouds.png'); let materialSky = new THREE.MeshBasicMaterial({ map: texCloud, transparent: true, opacity: 0.5, color: 0xFFFFFF }); materialSky.side = THREE.DoubleSide; let cubeSky = new THREE.Mesh(cube, materialSky);` You just need to adjust the size and the position of the cube and that's it! – Simone Moschetta Jul 04 '19 at 05:57

0 Answers0