Sometime ago,I was told me that no matter what you’re learning in tech whether it’s a new method, a new language, a new framework, or a new tool you can always approach it by asking three questions: What does it take? What does it return? And what does it do?
Unfortunately, with Three.js, this is the first time that approach has completely failed me, After three trails however, I'm writing this as an intro to threejs for those that are struggling with it just like me.
What is ThreeJs
Three.js is a high-level JavaScript library for creating 3D graphics in web browsers. It simply simplifies 3D creation and animation without any WebGL code knowledge.
To render 3D graphics in a browser, we need the help of the GPU(Graphic processing unit)the part of your computer that’s really good at drawing graphics.
WebGL is the tool that lets JavaScript talk to the GPU. It acts like a translator, helping the browser tell the GPU what to render on the screen.
Threejs is built on top of webgl, it abstracts the complicated webGL language into an easy to use javascript Api so we reallyy don't have to bother again that.
To understand or use Three.js, it’s important to know that everything is built around three core objects. These three objects form the foundation of the Three.js workflow:
1. Scene
2. Camera
3. Renderer
In this tutorial, we’ll explore these three core concepts while building something small along the way. This hands on approach will help make each concept easier to understand as we go but before we begin, the first step is installation by running this in our terminal
# three.js
npm install --save three
# vite
npm install --save-dev vite
1.Scene
A scene in Three.js can be thought of as the world where everything exists. It contains everything you want to see(objects, lights, and anything else that should appear on the screen).
A good way to think about a scene is like a movie set. The set holds all the props, actors, and lights. Without the set, there’s nothing to film.
In the same way, before we can display anything with Three.js, we must first create a scene. Every visible object in Three.js lives inside a scene
import * as THREE from 'three';
const scene = new THREE.Scene();
That’s it.
At this point, we've created an empty world. Nothing will show on the screen yet because the scene has no objects,no camera and nothing is being rendered So we need the camera.
2.Camera
The camera is the viewer's eye. It is used to look at everything inside the scene. on our movie set, the camera is literally the cameraman. And there are multiple camera types. Three.js provides several types of cameras, including:
• PerspectiveCamera
• OrthographicCamera
• CubeCamera
• ArrayCamera
• StereoCamera
However, the most common is the PerspectiveCamera which is designed to mimic how the human eye sees the world, where objects farther away appear smaller and objects closer appear larger.
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
a PerspectiveCamera takes 3 arguments, each controlling how the scene is viewed.
Field of View (FOV)
This controls how wide the camera can see.It is measured in degrees and usually represents the vertical viewing angle.
A larger value means you see more of the scene, while a smaller value zooms in closer.(ours is 75)Aspect Ratio
This is the shape of the camera’s view and is usually based on the browser window.
It is calculated by dividing the window’s width by its height:
window.innerWidth / window.innerHeight
The last two are
a. Near Clipping Plane
This defines how close an object can be to the camera before it is no longer visible.
b. Far Clipping Plane
This defines how far an object can be from the camera before it disappears.
Together, the near and far values create the view frustum, which determines what the camera can and cannot see.
For example, using 0.1 and 1000 means everything is seen frim the camera lens.
3. Renderer
The renderer is what actually draws everything on the screen. You can think of it like a painter, it takes all the objects in the scene, looks through the camera, and paints the final image onto your browser. In Three.js, the most commonly used renderer is the WebGLRenderer. When creating it, you need to tell it where to display the scene in the browser. Usually, this is done by attaching it to a DOM element, like the
or a specific .import * as THREE from 'three';
// Create the renderer
const renderer = new THREE.WebGLRenderer();
// Set the size of the renderer (usually the window size)
renderer.setSize(window.innerWidth, window.innerHeight);
// Add the renderer to the HTML document
document.body.appendChild(renderer.domElement);
Now that we have a scene, a camera, and a renderer, let’s add a 3D object. In Three.js, creating an object happens in three main steps
1. Create the geometry
The geometry defines the shape of our object. It’s basically the XYZ points that make up the object in 3D space.
Three.js has a bunch of built-in geometries, like cubes, spheres, cones, and planes that can be seen in the docs. For this tutorial, we’ll use a sphere:
const geometry = new THREE.SphereGeometry(15, 32, 16);
15 is the radius of the sphere
32 is the number of horizontal segments
16 is the number of vertical segments
This gives us a smooth-looking sphere.
2. Create the material
The material defines how the geometry looks. we can think of it as the wrapping paper for your 3D shape.
Three.js has many materials that can aslo been seen in their docs. Some respond to light (like MeshStandardMaterial), while others don’t. For simplicity, we’ll use MeshBasicMaterial, which does not rely on lights:
const material = new THREE.MeshBasicMaterial({
color: 0xf9a8d4,
wireframe: true,
});
color: sets the color of the sphere
wireframe: true makes the sphere display as a wireframe, so you can see its structure
3.Creating a mesh
A mesh is created by combining geometry and material. The mesh is the actual object that can be added to the scene.
const sphere = new THREE.Mesh(geometry, material);
sphere.position.set(8, -30, 0)
scene.add(sphere);
Now the sphere exists in the scene, ready to be rendered.
- Animate the sphere
We can make the sphere spin to make the scene more dynamic:
const animate = () => {
requestAnimationFrame(animate);
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.005;
sphere.rotation.z += 0.01;
renderer.render(scene, camera);
};
animate();
At this point, you have a 3D animated sphere rotating on your screen! Of course, there’s much more to Three.js than just this. It’s used in interactive websites, games, simulations, and a whole lot more but if you’ve struggled with Three.js like I have, congratulations, you’ve just created your first 3D object. From here, you can, Add lights to your scene, Experiment with materials, colors, and geometries and Play around with what you’ve built and see how changes affect your scene.
Also, check out the examples in the official Three.js documentation they’re a great source of inspiration and learning and maybe once I’ve mastered Three.js, I’ll come back with a more detailed tutorialand this time, we might build something even more exciting.
Top comments (0)