Hello and welcome back to Red stapler channel.
In this episode we're going to show you how to create realistic texture reflection effect
like this.
running on web browsers with 60 frames per second using three.js and javascript in just
a few minutes.
Ready?
Let's check it out!
So here is the example page that we're going to work on.
Just a few CSS background gradient setup and that's it.
Next we're going to prepare the three.js library.
You can download the latest release from github.
If your are not using npm or any package management
First we'll need a core library folder.
I'll copy the entire build folder and place it into our project.
Next we'll need three addtional add files for this project.
The first one is orbitcontrol.js inside example/jsm/controls.
This file will be used for camera mouse control.
Second is rgbeloader.js located inside jsm/loader.
We'll use this file for texture loading.
And the last one is flakestexture.js located inside jsm/texture. We'll use it to generate the texture.
I'll create a js folder in the project and put these files into it.
Now let's start working on the code
first I'll create a script tag inside the body and import all the library files.
Then I'll setup the global variables like scene, camera, renderer, mouse controls and light.
Then create an initialize function.
First, we'll setup the scene and WebGL renderer.
I'll set the alpha to true to make the scene background transparent so we can see the CSS background.
Then also set the antialias to true.
Then set the size to the current browser viewport and add it to the body as canvas element.
For the camera, I'll use the perspective with 50 FOV, using current window aspect ratio and 1000 viewing frustum
I'll place the camera 500 units away from the center and initialize the mouse control using orbitcontrol.
For the light setup, I'll use a simple white color pointlight with 1 intensity.
I'll place it 200 units away and add it to the scene.
Now for sphere, I'll use the SphereGeometry with 100 unit size and 64 width and height segments
For the material I'll use MeshPhysicalMaterial which support advance reflection rendering. But for now we'll leave the parameter as empty.
Then create a 3d object and add it to the scene.
inside the loop function, we'll update the mouse control
call the render method
and make the recursive call using requestanimationframe.
and call the init function to start the scene.
Now if everything is correct, You should see a white sphere in at the center of the scene.
Next, let's work on the texture
I'll create a CanvasTexture and pass the new FlakesTexture as model.
then set both vertical and horizontal texture wrapping as repeatwrapping
then set horizontal repeating to 10 times and vertical to 6 times.
next we'll work on setting up the physicalmaterial
It's easier to understand each setting by try experimenting with the demo on the three documentation page.
But for now I'm going to set the clearcoat to 1
and clearcoat roughness to 0.1
metalness to 0.9 and roughness to 0.5
set the color to purple and then add our texture as normalmap
and set the normalscale to 0.15
then add setting to the the material constructor.
ok let's see the result.
This looks pretty ugly. But the next step is going to change it.
First I'll change the texture encoding. There are several encoding available in three.js but for this tutorial, I'm going to use sRGBEncoding.
You can try experimenting the rest by yourself
Next I'll change the tonemapping to ACES Filmic and increase the exposure by 25%
Next we'll work on the reflection.
We'll need an environment map to create the reflection on the sphere. So I'm going to download a free HDR file from polyhaven and put it in our project.
Then to load the texture I'm going to use RGBEloader and set the path to our HDR file
And then in callback function we'll move sphere creation code inside.
Then we'll use PMREMGenerator which is a prefiltered mipmapped radiance environment map generator to generate the map from our HDR file.
So create the PMREM loader object from our renderer.
Then use fromCubemap method and pass our hdr file into it.
Then set the envmap parameter for our physical material
And as a final touch I'll add an autorotate and enabledamping to smooth out the mouse control.
So that's all for this tutorial. Hope you guys enjoy. If you like video and want to see more web development tips and tutorials.
Subscribe our channel to stay tune. Thanks for watching. See you next time. Bye!