<html><body><h2 style="text-align:justify;">1.  An introduction to Three.js</h2>Three.js is a Javascript library created by Ricardo Cabello. It allows us to deal with 3D visuals in the browser using WebGL in a very basic and natural manner.<h2 style="text-align:justify;">2. Fundamentals</h2>Let’s understand the structure of a three.js app.<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-xjQBpXMrZBkc8fAw4dDWqbsVGPmrDBXfi8C5lm0B.png"><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-CzaLuYFXydyXiCqTyGFiKBbQt6erYfi5lrOdYkJc.png" alt="">Things to notice about the diagram above.<ul><li style="text-align:justify;">The Renderer is the place where we are going to put the result of our scene. In Three.js we can have multiple scenes and each one can have different objects.</li><li style="text-align:justify;">The Mesh is made up of a Geometry and a Material.</li><li style="text-align:justify;">The Geometry — which defines its shape.</li><li style="text-align:justify;">The Material — which defines its appearance.</li></ul><figure class="table"><table><tbody><tr><td>// We define a box geometry with width = 1, height = 1, depth = 1  const geometry = new THREE.BoxGeometry( 1, 1, 1);  // We pass the color to the material  const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );  // Create a mesh  const box = new THREE.Mesh( geometry, material );  // Add a mesh to a scene  scene.add( box );</td></tr></tbody></table></figure> Camera: There are two types. <ul><li style="text-align:justify;">The first type is referred to as the perspective camera. It is basically the same as real-life cameras. We need four values to make a perspective camera. The first is a vertical field of view (fov). It is the maximum angle of what can be seen through the lens of the camera. The second is the aspect ratio. It represents the proportion of the width and height. The last things are the near and far. It represents the position near or far from the camera.</li><li style="text-align:justify;">The second type is the orthographic camera. It can be useful for rendering 2D scenes and UI elements.</li></ul>Light: In this tutorial we will discover two types of light.<ul><li style="text-align:justify;">Let’s start with the most fundamental type of light - Ambient Light</li></ul><figure class="table"><table><tbody><tr><td>const ambientLight = new THREE.AmbientLight(0x333333, 1);  scene.add(ambientLight);</td></tr></tbody></table></figure> Create a light source, tell it what color it should be (grey in our example), and how intense it should be. This light cannot be used to cast shadows because it has no direction.The last one I would like to mention is SpotLight. This light emits light in the form of a cone. The farther the light source is from the receiving surface, the brighter the light. This light can cast shadows <figure class="table"><table><tbody><tr><td>const spotLight = new THREE.SpotLight(0xFFFFFF, 1);  scene.add(spotLight);  spotLight.position.set(-100, 100, 0);  spotLight.castShadow = true;  spotLight.angle = 0.2;</td></tr></tbody></table></figure> It has the same constructor as AmbientLight except for a few more attributes castShadow and angle (in the example above I just want to mention 2 attributes). Surely you will easily imagine the meaning of these two attributes based on its name. Angle is the maximum extent of the spotlight, in radians, from its direction.CastShadow if it is set to true light will cast dynamic shadows.<h2 style="text-align:justify;">3. Loading 3d models</h2>There are numerous file formats for 3D models, including OBJ, glTF (Graphics Language Transmission Format), and FBX (FilmBoX) (or .OBJ). glTF is the most well-known of them all. glTF has two file extensions: .gltf (JSON/ASCII file format) and .glb (binary file format).Now let’s start a new example. You can use gltf sample models with <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0">this link</a>   <figure class="table"><table><tbody><tr><td>import {GLTFLoader} from   'three/examples/jsm/loaders/GLTFLoader.js';  // resource URL  const imgUrl = new URL('./assets/photo.glb', import.meta.url);  // Instantiate a loader  const assetLoader = new GLTFLoader();  // Load a glTF resource  assetLoader.load(imgUrl.href,   // Called when the resource is loaded  function ( gltf ) {    const model = gltf.scene;    scene.add(model);    model.position.set(-12, 4, 10);  },   // Called while loading is progressing  function ( xhr ) {    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );  },  // Called when loading has errors  function ( error ) {    console.log( 'An error happened' );  })</td></tr></tbody></table></figure>glTF is formatted as JSON file. The entirety of the 3D scene is described in this file. You can see it in the image below<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-b4saYrisuPpOuSZnlhMebG8ELM0Np7zFszCi0fhF.png" alt=""><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-12rWl0dvZ3duUxSwE5i3xZx4Yi8zMZel1DRK4zof.png"><ul><li style="text-align:justify;">The node is one node in the scene graph hierarchy. It can contain a transformation (e.g., rotation or translation)</li><li style="text-align:justify;">The mesh describes a geometric object that appears in the scene</li><li style="text-align:justify;">The material contains the parameters that define the appearance of an object. It usually refers to texture objects that will be applied to the rendered geometry.</li><li style="text-align:justify;">The texture is defined by a sampler and an image. The sampler defines how the texture image should be placed on the object.</li><li style="text-align:justify;">The accessor is used as an abstract source of arbitrary data. It is used by the mesh, skin, and animation, and provides the geometry data, the skinning parameters and the time-dependent animation values. It refers to a bufferView, which is a part of a buffer that contains the actual raw binary data.</li></ul><h2 style="text-align:justify;">4. Example</h2>I will create a new project so that you can apply it to real life. This project aims to choose products with your favorite color. As I’m a React developer, so I will install these packages to make it easily by using the syntax <figure class="table"><table><tbody><tr><td>yarn add three @react-three/fiber @react-three/drei</td></tr></tbody></table></figure> Here is src/App.js:<figure class="table"><table><tbody><tr><td>import {Suspense, useState} from 'react';  import {Canvas} from '@react-three/fiber';import {OrbitControls, useGLTF} from '@react-three/drei';   import './index.css'; export function Model({ ...props }) {    const { nodes, materials } = useGLTF('/Lamp.gltf')    return (      &lt;group {...props} dispose={null} scale={5}&gt;        &lt;mesh geometry={nodes.lamp.geometry} material={materials.IridescenceLamp}&gt;          &lt;meshBasicMaterial color={props.customColors.fabric} /&gt;        &lt;/mesh&gt;        &lt;mesh geometry={nodes.lamp_transmission.geometry} material={materials.IridescenceLampTransmissionIridescence}&gt;          &lt;meshBasicMaterial color={props.customColors.wood} /&gt;        &lt;/mesh&gt;        &lt;mesh geometry={nodes.lamp_iridescence.geometry} material={materials.IridescenceLampIridescence}&gt;          &lt;meshBasicMaterial color={props.customColors.metal} /&gt;        &lt;/mesh&gt;      &lt;/group&gt;    )  }  function App() {    const [fabric, setFabric] = useState("#000000")    const [wood, setWood] = useState("#ffffff")    const [metal, setMetal] = useState("#e5dcdc")    return (      &lt;Suspense fallback={null}&gt;        &lt;div className="App"&gt;          &lt;h1&gt;Three.js Demo&lt;/h1&gt;          &lt;div className="wrapper"&gt;              &lt;div className="card"&gt;                  &lt;div className="product"&gt;                    &lt;Canvas&gt;                      &lt;ambientLight /&gt;                      &lt;Model customColors={{fabric, metal, wood }}/&gt;                      &lt;OrbitControls makeDefault /&gt;                    &lt;/Canvas&gt;                  &lt;/div&gt;                  &lt;div className='colors'&gt;                      &lt;div&gt;                          &lt;input type="color" id="fabric" name="fabric"                                value={fabric}                                 onChange={(e) =&gt; setFabric(e.target.value)}/&gt;                          &lt;label for="fabric"&gt;Fabric&lt;/label&gt;                        &lt;/div&gt;                      &lt;div&gt;                          &lt;input type="color" id="metal" name="metal"                                  value= {metal}                                  onChange={(e) =&gt; setMetal(e.target.value)}/&gt;                          &lt;label for="metal"&gt;Metal&lt;/label&gt;                      &lt;/div&gt;                      &lt;div&gt;                          &lt;input type="color" id="wood" name="wood"                                  value={wood}                                   onChange={(e) =&gt; setWood(e.target.value)}/&gt;                          &lt;label for="label"&gt;Wood&lt;/label&gt;                      &lt;/div&gt;                    &lt;/div&gt;              &lt;/div&gt;          &lt;/div&gt;        &lt;/div&gt;      &lt;/Suspense&gt;    );  }  export default App; </td></tr></tbody></table></figure> You can download the sample model via <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/IridescenceLamp/glTF">this link</a>. Now let’s dive into the example above:<ul><li style="text-align:justify;">OrbitControls allows the camera to orbit around a target. </li><li style="text-align:justify;">The hook named useGLTF is used to load 3d content.</li></ul> I guess you must be wondering how to make a model based on .gltf file. It is so easy if you are using React to create your app by using the syntax <figure class="table"><table><tbody><tr><td>npx gltfjsx Lamp.gltf</td></tr></tbody></table></figure> As soon as you enter the syntax, it will create a file named Lamp.js. The only thing you need to do now is copy and paste it into the function Model (so easy right haha). Here is the result <img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-jWVJ9yf26pUANFOv7P7SlJNfXYW323kRQqb2Xr5b.png" alt=""> <h2 style="text-align:justify;">5. Conclusion</h2>Thanks for reading. There’s a lot more that could be said about three.js, but I hope this post has given you enough knowledge to get started with this powerful technology.If you have any questions feel free to let me know via duy.le@saigontechnology.com. Resources<ul><li style="text-align:justify;">Demo source code: <a href="https://github.com/khanhduy62/react-three-fiber/tree/feature/lamp">Repo’s link</a></li></ul>References<ul><li style="text-align:justify;">Reference: <a href="https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene">Link1</a>, <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0">Link2</a></li></ul></body></html>

Many individuals wish to build their own 3D website but may feel unsure of where to begin and have the confidence it would run smoothly. If you’re searching for a way to build 3d websites as a developer then this article will 100% help you.

Apply 3d content on a webpage using three.js library

Related articles