hello and welcome to red stapler Channel in this tutorial I'm going to show you
how to create an easy 3d world with skybox technique and three.js in just
a few minutes ready let's check it out
the concept of skybox is really simple create a cube to contain your 3d world
and then assign the right texture to each side of the cube there are lots of
available skybox images online both free and paid version for this tutorial
I'm going to download one from opengameart.org and then move all images to
the web directory next let's start with the basic setup for three.js as usual
first include the latest version of the library then I'm going to create a scene
set up a camera and renderer
I will used current viewport as renderer size and added to the page as canvas element
next I will set up an orbitControl.js to enable mouse control of the camera
and here is the key part I'm going to create an array to store materials for
each side of the cube then use texture loader to load the image
and once loaded we'll push each material to the array we'll use meshBasicMaterial
for the skybox this material is not affected by light so we don't have
to set up any light and still be able to see it then we will create a box
geometry and put it together with the material array to create a queue and
added to the scene
finally we will create a recursive function loop to render a scene
now if you check the result you won't be able to see anything but if you zoom out
you know why it because we assign the texture to the outside of the cube we can
fix this by setting the side property of the material to three.backside
looks good but there's still a problem if we zoom out too much it will break
the skybox so we will have to limit the zoom distance like so
and that's it hope you guys enjoyed this short tutorial and if you love this
video don't forget to like or subscribe to stay with us for more thanks for
watching and see you next time bye