Right Click Is Disabled...

3D Web Development

Three JS logo

Basic Information about 3JS

What is threejs?

three.js is the world’s most popular and powerful JavaScript library for displaying 3D content on the web. It provides developers with the tools and utilities necessary to build interactive and visually appealing 3D applications, games, visualizations, and more, all within the browser environment.

With Three.js, you can bring your ideas to life by leveraging the capabilities of WebGL, a web standard that enables hardware-accelerated 3D graphics in modern browsers. Three.js abstracts away the complexities of WebGL, providing a simplified and intuitive interface for working with 3D graphics.

Pre- requisite of threejs

  • Proficiency in JavaScript
  • HTML and CSS:
  • Basic understanding of 3D graphics:
  • WebGL
  • Web Development Basics:
  • Math Skills

Remember that learning Three.js is a journey, and you don’t need to master all these prerequisites before starting. As you work with Three.js and create projects, you’ll naturally build your knowledge and skills in these areas.

Installation / Setup of threejs

You can download threejs zip folder on the official Three.js website at https://threejs.org/

                                             OR

You can install threejs by npm(node package manager) : npm i three

  • Import  threejs using this command

Core concepts of three.js

  • Scene:

A Scene is the container that holds all the objects, lights, and cameras in Three.js. It represents the virtual 3D environment where your objects exist and interact. You can add and remove objects from the scene and control their transformations.

  • Camera:

The Camera determines the viewpoint of the scene. It defines what portion of the scene will be visible in the rendered output. Three.js provides different camera types, including PerspectiveCamera, OrthographicCamera, and more. Cameras can be positioned and oriented to control the view of the scene.

  • Renderer:

The Renderer is responsible for rendering the scene using WebGL or other rendering technologies. It takes the scene and camera as input and produces the final output onto a canvas or HTML element. Three.js provides WebGLRenderer as the default renderer, but you can also use other renderers like CSS3DRenderer or SVGRenderer.

  • Geometry:

Geometry represents the shape and structure of 3D objects. Three.js provides a variety of pre-defined geometries, such as BoxGeometry, SphereGeometry, PlaneGeometry, and more. You can also create custom geometries by specifying vertices, faces, and other attributes.

  • Material:

Materials determine how the surface of an object will appear when rendered. Three.js offers various types of materials, including MeshBasicMaterial, MeshPhongMaterial, MeshStanderdMaterial, and more. Materials can define properties like color, texture, shininess, transparency, and reflectivity.

  • Mesh:

A Mesh is a combination of a Geometry and a Material. It represents a 3D object in the scene. You can create meshes by combining geometries and materials, and then add them to the scene.

  • Lighting:

Lighting plays a crucial role in creating realistic 3D scenes. Three.js provides different types of lights, such as AmbientLight, DirectionalLight, PointLight, and SpotLight. You can position lights, adjust their intensity, color, and other properties to achieve desired lighting effects in your scene.

  • Rendering Loop(Animation):

The Rendering Loop is a continuous process that updates and renders the scene on the screen. It typically involves updating object positions, animations, handling user interactions, and calling the renderer’s render() function to produce the updated view. The loop runs at a desired frame rate, usually 60 frames per second (FPS), to create smooth and interactive animations.

  • Raycasting:

Raycasting is a technique used to determine which objects or parts of objects in the scene are intersected by a ray or a line segment. It is commonly used for picking or selecting objects, implementing collision detection, or handling user interactions like mouse clicks or touch events.

Example : https://threejs.org/docs/?q=ray#api/en/core/Raycaster

After creating the 3D Gemoetry using three.js, we can also apply texture and materials on the 3D object

  • Textures:

Textures are images that can be applied to the surface of 3D objects in Three.js. They add visual details and realism to objects. Here’s an example of how to apply a texture to a simple cube:

Example:

We also can use the normal maping to add surface details and depth to objects.by adding normal map, object will look more realistic.we also can add roughness and metalness on 3D object (value should be between 0 to 1). Here’s an example of applying normal mapping to a textured object:

Basic Information about 3JS Read More »

Three JS logo

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.

Creating first simple 3D Model and texturing in 3JS Read More »