Hi Everyone, my name is Devang Saklani and Today I'm going to teach you how you can create your first 3d scene with the help of Threejs.
First of all, What is Threejs?
Three. js is a JavaScript library used to create and run / display animated 3D graphics in a web browser using WebGL. It also acts as an Api for WebGL.
It uses <canvas>
element to display the scene.
It has made displaying 3d objects in Web browsers far easy. As compared to writing native WebGL, ThreeJS is super easy as well as performant.
Setting up the Basic Environment
Our first step would be to setup a basic environment for our website. We will use ThreeJS npm package and Webpack to bundle it, but you can also use the cdn link for the package.
I won't tell you how to use Threejs with CDN in this project but you can read official installation docs to use this method
Clone this starter webpack template: Github link
and run
npm install
or
yarn
The cloned repo folder structure should be like this:
To start webpack server run npm run dev
or yarn dev
Creating Basic Scene
First let's discuss what are we going to do:
- Firstly we will import
three
from the package - Then we will initialize a new ThreeJS Scene
- A new camera (for viewing the scene)
- Creating a 3d cube (our 3d object)
- Setting up the renderer and the animate function
It is as easy as it sounds! Let's start
- Installation:
npm i three
or
yarn add three
Now, in script.js
- Import Threejs:
import * as THREE from "three";
- Create a new ThreeJS Scene
const scene = new THREE.Scene();
- Camera for viewing scene
const camera = new THREE.PerspectiveCamera(
75, // field of view
innerWidth / innerHeight, // aspect ratio of the canvas / screen
0.1, 500 // near and far clipping plane respectively
);
camera.position.set(0, 0, 3); // Changing the default position of the camera
To know more about these properties follow the official docs
or read this guide
- Setting up our cube object
const geometry = new THREE.BoxGeometry(); // Creating a new Geometry
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Giving it a material
const cube = new THREE.Mesh(geometry, material); // Combining both things
scene.add(cube); // adding it to the scene
by this time nothing will appear on the screen because nothing is rendered yet, So let's initiate a renderer
- Creating a renderer
const renderer = new THREE.WebGL1Renderer(); // Creating renderer
renderer.setSize(innerWidth, innerHeight); // Size of canvas element
renderer.setPixelRatio(devicePixelRatio); // Yes pixel-ratio of the screen
document.body.appendChild(renderer.domElement); // Adding canvas element to the html
- Now comes the final step: Rendering!!
function animate() {
renderer.render(scene, camera); // Rendering single frame
cube.rotation.x += 0.01; // Rotating on the x and y axis
cube.rotation.y += 0.01; // Adding simple animation to our object
controls.update() // Required for smooth camera movement
requestAnimationFrame(animate); // Calling this function again to repeat the process
}
animate();
What's happening is we are creating a self-calling function that will call itself around 60 times a second (depends on the user's Screen and CPU) and will create and display a frame on each render.
In the third line we will rotate the cube to get some simple animations on the scene.
The screen should look like this:
- Wanna add controls to the scene? In order to add Mouse Controls to the Scene we will use OrbitControls
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";// import at the top
// ... camera, renderer
const controls = new OrbitControls(camera, renderer.domElement); // Creating controls
controls.enableDamping = true; // Enabling the smooth camera movement effect
If any error occurs just leave a comment below I'll surely try to reply ASAP.
That's it, You've finally created your first ThreeJS scene! Congratulations! 🎉
Well this was pretty basic, Now lets add something interesting!
Change MeshBasicMaterial
to MeshNormalMaterial
.
The screen should look like this:
Read more about materials here: Official docs or here
The final script should look like this:
Check it live here: click here
You can add more cubes, spheres, triangles as well as your Custom bleder models! in ThreeJS.
This is the most recent website I build using ThreeJS: click here and TBH it's pretty basic and easy.
If you are interested in learning ThreeJS I'd recommend reading the official docs or going to Threejs Fundamentals and if you're really interested in WebGL and ThreeJS I'd recommend you to watch this course by Bruno Simon. He is one of the finest ThreeJS developers.
Thanks for reading this post and if you got any errors, just leave a comment below or mail me.
A post by Devang Saklani. Hope my efforts were of any help.😇
Top comments (0)