10 Jan 2021

Threejs Skybox Tutorial | Demo

threejs Skybox tutorial
#three.js skybox tutorial/demo#

In this post I am going tell you about How you will create a SKYBOX environment in threejs project. To build such function threejs have already a constructor (THREE.CubeTextureLoader) that will help you to create Skybox easily.

What are Skybox in Threejs?

Skybox is technic which help you to a simulate/create a real world experience under the basic cube and with 6 textures.

Under the Skybox technic, Basically a cube having 6 different picture/texture around its all of 6 faces.

three.js code example with
Explanation :

  • 6 textures resources urls.
  • CubeTexureLoader.load() take an array of 6 textures/images urls.
  • and added to scene object as background.
    scene.background = textureCube;
    var baseUrl = "https://threejs.org/examples/textures/cube/Park3Med/";                
    var urls = [ baseUrl + "px.jpg", 
    baseUrl + "nx.jpg", baseUrl+ "py.jpg", baseUrl + "ny.jpg", baseUrl + "pz.jpg", baseUrl+ "nz.jpg"];  
    var textureCube = new THREE.CubeTextureLoader().load( urls );                
    textureCube.mapping = THREE.CubeRefractionMapping;             
            scene.background = textureCube;     

    Live Demo