REMINDER

WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element...

Source : https://www.khronos.org/webgl/

Three.JS

JavaScript 3D Library which makes WebGL simpler.

Getting started

let camera = new THREE.PerspectiveCamera(
    70, window.innerWidth / window.innerHeight, 0.01, 2 );
camera.position.z = 1;

let scene = new THREE.Scene();

let geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
let material = new THREE.MeshNormalMaterial();
let mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

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

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

Object3D

Rotation

mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;

Position

let time = Date.now() / 1000;
mesh.position.x = Math.cos(time) * .3;
mesh.position.y = Math.sin(time) * .3;

Scale

let time = Date.now() / 1000;
mesh.scale.x = 1 + Math.cos(time) * .8;
mesh.scale.y = 1 + Math.sin(time) * .8;

Practice 1

Camera

FOV

(field of view)

let camera = new THREE.PerspectiveCamera(75, width / height, 0.01, 2);

FOV

(field of view)

let camera = new THREE.PerspectiveCamera(120, width / height, 0.01, 2);

FOV

(field of view)

let camera = new THREE.PerspectiveCamera(30, width / height, 0.01, 2);

Near

let camera = new THREE.PerspectiveCamera(75, width / height, 1, 2);

Far

let camera = new THREE.PerspectiveCamera(75, width / height, 0.01, 1);

Practice 2

Geometry

Sphere

let geometry = new THREE.SphereGeometry( 0.2, 32, 32 );

Vertex

let geometry = new THREE.SphereGeometry( 0.2, 8, 8 );

Loader

let loader = new THREE.OBJLoader();
loader.load( 'teapot.obj', function ( object ) {
    scene.add( object );
}, progressCallback, errorCallback);

Practice 3

Material

Basic

let material = new THREE.MeshBasicMaterial({ color: 0x222222 });

Lambert

let material = new THREE.MeshLambertMaterial({ color: 0x222222,
    emissive: 0x000000 });

Phong

let material = new THREE.MeshPhongMaterial({ color: 0x222222,
    emissive: 0x000000, specular: 0x111111, shininess: 30 });

Shininess

let material = new THREE.MeshPhongMaterial({ color: 0x222222,
    emissive: 0x000000, specular: 0x111111, shininess: 100 });

Standard (PBR)

let material = new THREE.MeshStandardMaterial({ color: 0x222222,
    roughness: .3, metalness: 0 });

Shading

let material = new THREE.MeshLambertMaterial({ ...,
    flatShading: true });

Wireframe

let material = new THREE.MeshLambertMaterial({ ...,
    wireframe: true });

Opacity

let material = new THREE.MeshLambertMaterial({ ...,
    transparent: true, opacity: .2 });

Texture (Map)

let textureLoader = new THREE.TextureLoader();
let texture = textureLoader.load('ball.jpg');
let material = new THREE.MeshLambertMaterial({ ...,
    color: 0xffffff, map: texture });

Normal Map

let textureLoader = new THREE.TextureLoader();
let texture = textureLoader.load('ball_normal.jpg');
let material = new THREE.MeshLambertMaterial({ ...,
    normalMap: texture, normalScale: new THREE.Vector2(1, 1) });

Environment Map

let urls = [ "posx.jpg", "negx.jpg", "posy.jpg", "negy.jpg", "posz.jpg", "negz.jpg" ];
let texture = new THREE.CubeTextureLoader().load( urls );
let material = new THREE.MeshLambertMaterial({ ...,
    envMap: texture, reflectivity: .08 });

Light Map

let textureLoader = new THREE.TextureLoader();
let texture = textureLoader.load('ball_light.jpg');
let material = new THREE.MeshLambertMaterial({ ...,
    lightMap: texture, lightMapIntensity: 1 });
geometry.faceVertexUvs[1] = geometry.faceVertexUvs[0]; // important !

Practice 4

Light

Ambient Light

let ambientLight = new THREE.AmbientLight( 0x505050 );
scene.add( ambientLight );

Directional Light

let directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
scene.add( directionalLight );

Point Light

let pointLight = new THREE.PointLight( 0xffffff, 1, 10 );
scene.add( pointLight );

Spot Light

let spotLight = new THREE.SpotLight( 0xffffff, 1, 1, 0.3, 1 );
scene.add( spotLight );

Enjoy !

@yoanngueny