Getting Started With Tree.js

Learn Tree.js for create content 3D on webpage

GettingStartedWithTreejs

Open Table of contents

What is three.js?
Installation
- HTML
- Script
Creating a Scene
- Scene
- Camera
- Renderer
- Light (Optional)
- 3D object
Animate 3D object
Finally
reference

What is three.js?

Three.js is a 3D library that tries to make it as easy as possible to get 3D content on a webpage.

Installation

you has many way to install tree.js in your project follow url Three.js Documentation for this project i select Import from a CDN

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Getting Started With Tree.js</title>
  </head>

  <body>
    <script type="module" src="app.js"></script>
  </body>
</html>index.html

Script

import * as THREE from "https://cdn.skypack.dev/three@0.129.0/build/three.module.js";app.js

Creating a Scene

Scenes allow you to set up what is to be rendered and where by three.js This is where you place objects, lights and cameras.

we need three things: scene, camera and renderer, so that we can render the scene with camera.

Scene

const scene = new THREE.Scene();app.js

Camera

camera is not visible. we cannot see this camera, it’s more like a point of view when we will do the render later of our scene It will be from point of view so from camera point of view like movie scene there are different types of camera

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

camera.position.z = 5;
scene.add(camera);app.js

first attribute is the field of view(FOV). FOV is how large our vision angle if use very large angle we will be able to see in every direction at once but if we use a small angle things will look zoomed in

The second one is the aspect ratio You almost always want to use the width of the element divided by the height,

the next two attributes are the near and far clipping plane. basically anything closer to the eye than the near clipping distance is not to be displayed because it is too close and then anything further away from the eye than far clipping distance is not to be displayed because it is too far

Renderer

we add the renderer element to our HTML document. This is a <canvas> element the renderer uses to display the scene to us.

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);app.js

Light (Optional)

2 basic light

AmbientLight is like a soft light but that lights everything all the objects in the same but equally This light cannot be used to cast shadows as it does not have a direction.

DirectionalLight is light source that act like the sun that illuminates all objects in the scene equally you know from specific direction

//soft white light
const ambientLight = new THREE.AmbientLight(0x101010, 1.3);
scene.add(ambientLight);

// White directional light at half intensity shining from the top.
const sunLight = new THREE.DirectionalLight(0xffffff, 0.5);
sunLight.position.y = 15;
sunLight.position.set(500, 500, 500);
scene.add(sunLight);app.js

3D object

we create geometry and meterial then create a mesh.

BoxGeometry is the shape of the object. MeshBasicMaterial is the color of object. Then, Create Cube with geometry and material.

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);app.js

Animate 3D object

renderer.setAnimationLoop(animate);

function animate() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}app.js

Finally

Then,Put everything together. ;)

import * as THREE from "https://cdn.skypack.dev/three@0.129.0/build/three.module.js";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 5;
scene.add(camera);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);

const ambientLight = new THREE.AmbientLight(0x101010, 1.3);
scene.add(ambientLight);

const sunLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(sunLight);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();app.js

Ok, Done for get started basic tree.js see you next time ;)

reference

Three.js Documentation

Code a Virtual 3D Art Gallery – Three.js JavaScript Tutorial / Code-a-Long