Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

three.js

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?

like image 642
Modig Avatar asked Aug 26 '15 18:08

Modig


1 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.

like image 195
Modig Avatar answered Nov 08 '22 21:11

Modig