Intro to WebGLwith Three.js

WebGL

JavaScript API for rendering interactive 2D and 3D graphics
inside an HTML <canvas> element.

Browser Support

three.js

threejs.org

3D Javascript Library

Renderers: WebGL, <canvas>, <svg>, CSS3D / DOM, and more

Scenes, Cameras, Geometry, 3D Model Loaders, Lights, Materials,
Shaders, Particles, Animation, Math Utilities

<!DOCTYPE html>
<html>
  <head>
    <title>Basic Three.js App</title>
    <style>
      html, body { margin: 0; padding: 0; overflow: hidden; }
    </style>
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@<version>/examples/jsm/"
        }
      }
    </script>
    <script type="module" src="/main.js"></script>
  </body>
</html>

import * as THREE from 'three';

var scene = new THREE.Scene();
var aspect = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera( 75, aspect, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;
  renderer.render( scene, camera );
}

renderer.setAnimationLoop( animate );

Scene Graph

Object3D

var group = new THREE.Group();
scene.add( group );

group.add( mesh1 );
group.add( mesh2 );

mesh2.visible = false;
group.remove( mesh2 );

group.children // mesh1
group.parent // scene

Object3D Transforms

mesh.position.x = 0

mesh.position.x = -100

mesh.scale.set(2,2,2)

mesh.rotation.y = Math.PI / 4

mesh.rotation.y = Math.PI * 5 / 4

Unit Circle

mesh.rotation.y = THREE.Math.degToRad(45);

Unit Circle

mesh.position.x = Math.cos( time );
mesh.position.y = Math.sin( time );

Cameras

cam = new THREE.PerspectiveCamera( fov, aspect, near, far )

cam = new THREE.PerspectiveCamera( fov, aspect, near, far )

cam = new THREE.PerspectiveCamera( fov, aspect, near, far )

camera.fov = 15

camera.fov = 60

camera.far = 1000

camera.far = 3000

camera = new THREE.OrthographicCamera( left, right, top, bottom, near, far );

Camera Controls

/three.js/examples/jsm/controls/OrbitControls.js

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

controls = new THREE.OrbitControls( camera );

function animate() {
  requestAnimationFrame( animate );
  controls.update();
  renderer.render( scene, camera );
}

controls.enablePan = false;
controls.enableZoom = false;
controls.enableRotate = false;

controls.minDistance
controls.maxDistance

controls.minPolarAngle
controls.maxPolarAngle

Geometry

var geo = new THREE.BoxGeometry( width, height, depth );

var geo = new THREE.SphereGeometry( 60, 24, 16 );

var geo = new THREE.CylinderGeometry( ... );

var geo = new THREE.TorusGeometry( ... );

Materials

var material = new THREE.MeshBasicMaterial({ ... });

var material = new THREE.MeshLambertMaterial({ ... });

var material = new THREE.MeshPhongMaterial({ ... });

var material = new THREE.MeshStandardMaterial({ ... });

var material = new THREE.MeshToonMaterial({ ... });

var material = new THREE.MeshNormalMaterial({ ... });

var material = new THREE.MeshNormalMaterial({ ... });

Material Properties

flatShading: false

flatShading: true

flatShading: true // face normals

flatShading: true // face normals

flatShading: false // vertex normals

color: 0xaaaaaa

color: 0x3794cf

shininess: 40

shininess: 80

wireframe: true

transparent: true, opacity: 0.5

Texture Mapping

var loader = new THREE.TextureLoader();
var texture = loader.load("color-map.jpg");

map: texture

normalMap: texture

specularMap: texture

map: colorMap, specularMap: specMap, normalMap: normalMap

var material = new THREE.MeshPhongMaterial({
  color: 0xaaaaaa,
  specular: 0x333333,
  shininess: 15,
  map: colorMap,
  specularMap: specMap,
  normalMap: normalMap
});

Lights

light = new THREE.DirectionalLight( 0xdddddd, 0.8 );

light.position.set( -80, 80, 80 );

light.position.x = 80;

light.target.position = 160;

light.position.x = -80;

light = new THREE.DirectionalLight( 0xdddddd, 0.8 );

light = new THREE.DirectionalLight( 0xb4e7f2, 0.8 );

light = new THREE.DirectionalLight( 0xb4e7f2, 0.2 );

light = new THREE.DirectionalLight( 0xb4e7f2, 1.5 );

light = new THREE.DirectionalLight( 0xb4e7f2, 0.8 );

light = new THREE.PointLight( 0xb4e7f2, 0.8 );

light = new THREE.PointLight( 0xb4e7f2, 0.8 );

light = new THREE.SpotLight( 0xb4e7f2, 0.8 );

light.angle = Math.PI / 9;

light.angle = Math.PI / 5;

light.penumbra = 0.4;

light.penumbra = 0;

light.penumbra = 0.8;

light = new THREE.AmbientLight( 0x444444 );

light = new THREE.AmbientLight( 0x000000 );

light = new THREE.AmbientLight( 0x444444 );

Three Point Lighting

Key, Fill, Rim

Model Loader

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  
const loader = new GLTFLoader();

loader.load("teapot.glb", function( gltf ) {
  mesh = gltf.scene.children[0];
  mesh.material = new THREE.MeshPhongMaterial();
  scene.add( mesh );
});

Interaction

// normalized device coordinates (-1 to +1)
pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

raycaster = new THREE.Raycaster();

raycaster.setFromCamera( pointer, camera );

var intersects = raycaster.intersectObjects( scene.children );

INTERSECTED = intersects[ 0 ].object;

Intro to WebGLwith Three.js

WebGL

Browser Support

three.js

Scene Graph

Object3D

Object3D Transforms

Unit Circle

Unit Circle

Cameras

Camera Controls

Geometry

Geometry

Materials

Materials

Material Properties

UVs

Texture Mapping

Lights

Lights

Three Point Lighting

Model Loader

Interaction

davidlyons.dev

Thanks davidlyons.dev