How do I make a working skybox in Three.js?

Question

I am new to Three.js and I am having trouble finding/understanding a lot of the official Three.js documentation. Also, a lot of tutorials/videos that I have found are at least 5 years out of date and I can't seem to get them working on my local pc (just a white screen when opened).

See [this](https://threejsfundamentals.org/threejs/lessons/threejs-backgrounds.html) — gman, Apr 06 '20 at 06:01

score -1 · Answer 1 · answered Apr 06 '20 at 05:34

There are lots of ways. One way is to load an equirectangular texture and set renderer.background:

renderer.background = new THREE.TextureLoader().load('youtextureurl.jpg')

Or do the same onto a backsided sphere:

scene.add ( new THREE.Mesh( new THREE.SphereBufferGeometry(100,32,32), new THREE.MeshBasicMaterial( {map:new THREE.TextureLoader().load('youtextureurl.jpg'),side:THREE.BackSide );

Once you have a skybox set, you can use a CubeCamera to take a snapshot of the environment and then set scene.environment to that resulting cubemap to get some environmental lighting effects.

How do I make a working skybox in Three.js?

1 Answers1