Introduction to three.js

Introduction to three.js
Kou 2021/5/29

・Powerful Javascript 3D Library
・You can create animated 3D graphics
・Uses WebGL which allows for access to GPU
What is three.js?

Examples of what you can do with three.js!
https://threejs.org/

How to use three.js?
It’s like playing with Legos.
In essence, we place an object, define a camera, light the
scene and Three.js renders our 3D image.

Configuring three.js is Simple
<html>
<body>
<script src="js/three.js"></script>
<script>
// Our Javascript will go here.
function init() {
}
window.addEventListener("load", init);
</script>
</body>
</html>

Lets Review the Basics of three.js
● Scene
● Camera
● Light
● Geometry (Objects)
● Mesh and Material (Objects)
● Renderer

Scene
● A scene is set in coordinate system (X,Y, Z).
● You place your objects in the scene, such as cubes, cars,
houses, etc.
var scene = new THREE.Scene();

Camera
● A camera is your view port to look at the objects in a
scene.
● Think of looking through the a real camera. You see a
view of the world. This is how your scene will appear.
const camera = new THREE.PerspectiveCamera(40,width / height);
camera.position.set(0, 0, 1000);

Geometry
Geometry refers to the shapes we create.
These are your objects. Three.js support many
geometric shapes to quickly create 3D objects.
const geometry = new THREE.SphereGeometry(300, 30, 30);

Mesh and Material
Material is used to apply texture and color
to an object.
Think of your cube again. You can color each side or apply textures
(.jpg images) to the sides of the cube.
const material = new THREE.MeshStandardMaterial({
color: new THREE.Color("rgb(0, 159, 140)"),
wireframe: true
});
const mesh = new THREE.Mesh(geometry, material);

Light
Lights are used to illuminate a specified
area in a scene.
const ambient = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambient);
const directional = new THREE.DirectionalLight(0xffffff, 1);
directional.position.set(1, 1, 1);
scene.add(directional);

Renderer
Using the WebGL renderer, THREE.WebGLRenderer is used.
// renderer
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("mainCanvas")
});
renderer.setClearColor(0x000000);
// render
renderer.render(scene, camera);

My first rolling ball
With three.js
Preview

Introduction to three.js

More Related Content

What's hot (20)

Similar to Introduction to three.js (20)

Recently uploaded (20)

Introduction to three.js

Editor's Notes