hello and welcome to red stapler channel in this tutorial we are going to show
you how to create a realistic and real-time reflection surface with
JavaScript and three.js let's check it out first we are going to create a 3D
world using the same technique as our previous video called skybox basically
we will create a cube and put a texture on each side and place the camera at the
center this is a quick and easy way to create 3D world
let's start with the basic setup we need to import two files
to three.js core file and orbitcontrol.js for the camera control first create a
scene and set up a camera
like most tutorial I'm going to use a perspective camera using 70 degrees
viewing angle and current viewport aspect ratio
I will place the camera mid air and away from the center
next setup the renderer I'll use WebGL renderer and enable anti-aliasing
set the size to current viewport and add it to the page
and finally setup an orbit camera. For this tutorial I will disable the zooming
and let's run it to see if there is a console
if everything goes well you should see an empty back screen
now you can download any cubemap that you like for this tutorial I'll use
the interior of st. Peter's Church
and once downloaded you get six images for each cube side we will
use the texture loader to load them all but first let's create an array to keep the path to the image
then use cube texture loader and set it as scene background
I will remove the test render and create render loop instead
next we'll create a sphere shape. To create 3D object in three.js you need two
things geometry which defines the physical
shape and material which define the surface and texture let's create a
material we will use a mesh basic material the basic material ignores the
light so we can see object without setting up any light
then create a sphere geometry with 350 units radius
last you are numbers of segments more segments create more rounded shape at
the cost of performance
then create our shape from the geometry and material
and place it at the center
now to create a reflection will use a cube camera to capture the scene from
all directions then apply the captured image as texture of the object
create a cube camera with 1000 units range
the last number is the resolution setting too high will resulted in
framerate drop then place the camera at the same
position of the sphere
then apply the captured image as environment map of the sphere material
finally in a render loop we will need to update a camera using update cubemap method
and that's all for this tutorial you can download the code from our website at
the link below don't forget to subscribe if you want to see more dev tips and
tutorials thanks for watching see you next time bye