Note: Please make sure that you have successfully installed the working environment!

1. Introduction

• Three.js is a 3D library that tries to make it as easy as possible to get 3D content on a webpage.
• Three.js is often confused with WebGL since more often than not, but not always, three.js uses WebGL to draw 3D. WebGL is a very low-level system that only draws points, lines, and triangles. To do anything useful with WebGL generally requires quite a bit of code and that is where three.js comes in. It handles stuff like scenes, lights, shadows, materials, textures, 3d math, all things that you'd have to write yourself if you were to use WebGL directly.

2. Setup and Installation

• Kindly ensure that both Node.js® and NPM works well on your machine (else, you can go back to the [Tutorial 01] and install them again)
• Cloning the following repo with git
  • git clone <https://github.com/brunosimon/threejs-template-simple.git>
  • Following the README.md in that repo

    • Install dependencies (only the first time)

      npm install

    • Run the local server

      npm run dev

Browser

Recommended: Chrome, Edge or Firefox.

NOT recommended: Safari (since your scene may not working properly).

3. Render with Three.js

Setup a canvas and window sizes, then create a scene

/**
 * Base
 */
// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

Add Camera and simple objects (Geometries)

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 1
camera.position.y = 1
camera.position.z = 1
scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Cube
 */
const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
)
scene.add(cube)

Manage Materials and Textures

Add Debug UI

import * as dat from 'dat.gui'
import Stats from 'stats.js'

/**
 * Base
 */
// Debug
const gui = new dat.GUI()

const Folder = gui.addFolder('folderName')

// Stats
const stats = new Stats()
stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom)

.
.
.

folderName.add(group.position, 'y').min(1).max(3).step(0.01)