I'm new to threejs, how to create a sky dome

I'm pretty new to three.js and I tried for hours to create a skybox/skydome for a better visual feeling to my world (in this case space). Googled, checked tutorials, asked here on StackOverflow. And nothing worked, or I got a silly and dumb answer here on SO. Question is simple: how to make a skybox/dome?

2 Answers

This is how you do a skydome in threejs.

var skyGeo = new THREE.SphereGeometry(100000, 25, 25); 

First the geometry. I wanted it big and made it big

 var loader = new THREE.TextureLoader(), texture = loader.load( "images/space.jpg" ); 

Loads the texture of your background space. One thing here is that you need it to run through a server to be able to load the texture. I use wamp or brackets preview.

Create the material for the skybox here

 var material = new THREE.MeshPhongMaterial({ map: texture, }); 

Set everything together and add it to the scene here.

 var sky = new THREE.Mesh(skyGeo, material); sky.material.side = THREE.BackSide; scene.add(sky); 

This might not be the best solution for this, but it´s easy specially for a beginner in threejs. Easy to understand and create.

This is how you can load image as texture and apply that on innerside of a sphere geometry to emulate skydome.

Complete solution with error callback for future reference

 //SKY var loader = new THREE.TextureLoader(); loader.load( "./assets/universe.png", this.onLoad, this.onProgress, this.onError ); onLoad = texture => { var objGeometry = new THREE.SphereBufferGeometry(30, 60, 60); var objMaterial = new THREE.MeshPhongMaterial({ map: texture, shading: THREE.FlatShading }); objMaterial.side = THREE.BackSide; this.earthMesh = new THREE.Mesh(objGeometry, objMaterial); scene.add(this.earthMesh); //start animation this.start(); }; onProgress = xhr => { console.log((xhr.loaded / xhr.total) * 100 + "% loaded"); }; // Function called when download errors onError = error => { console.log("An error happened" + error); };