Creating first simple 3D Model and texturing in 3JS

In this article we will learn to load 3D model (.gltf format) on web page.and apply the textures on that.

Pre-requisite:

• Create scene
• Set camera
• Set renderer
• Set lights

Example:

Above is a basic things we have to apply  in all project to see 3D scene in webpage.

Now, we want to add 3D model on our webpage (3D model can have different formats like .gltf, .3dm, .glb etc.. but we will load .gltf model on the webpage)

• We need to create instance of GLTFLoader class to load any 3D model on webpage.
• By load() of gltfLoader class we can load the model.
• In below code snippets I have scene.gltf 3D model in my project inside 3D files folder

(you also can download same 3D model from here:

https://sketchfab.com/3d-models/cube-193f81c9e5bd47dabb58181a3b39ee85 )

Example:

below code sets up an animation loop that continuously renders the scene, updates the model’s rotation, and provides smooth animation by using requestAnimationFrame to control the frame rate.

Example:

By applying above things you should be able to see the 3D model with rotation on the webpage.

Now, we will apply the texture and material on the model.

• We will need to create an instance of TextureLoader class.
• We will create the material and map that texture on it.
• Inside load() we have to find the mesh inside the 3D object by traversing the model and we will apply texture and material on the mesh.

Example:

• By applying normalMap to the MeshStandardMaterial it will looks more realistic.
• We also can set color, roughness and metalness(0 to 1) to the material.

By trying above all things we can see our 3d model on webpage with applied textures.