EXPERIMENT WORKSHOP

THREE.JS - CRMA 2015

Experiment

  • Explore
  • Practice
  • Fail and retry
  • Achieve (?)

Randomness and accidents

Set an objective, and don't respect it

Three.js

3D library for the browser

3D Engine

  • Scene contains Objects and Lights
  • Camera watches Scene
  • Renderer outputs camera on a Canvas

Math

  • Vectors2
  • Vectors3
  • Matrices3
  • Matrices4
  • Quaternions
  • ...

Objects THREE.Object3D

  • Position - THREE.Vector3
  • Rotation - THREE.Vector3
  • Scale - THREE.Vector3
  • Display list

Mesh THREE.Mesh

Extends Object3D
Mesh = Geometry + Material

Geometries

  • Box - THREE.BoxGeometry
  • Sphere - THREE.SphereGeometry
  • Custom geometries with loaders
  • ...

Materials

  • Basic - THREE.MeshBasicMaterial
  • Shader - THREE.MeshShaderMaterial
  • Lambert - THREE.MeshLambertMaterial
  • Phong - THREE.MeshPhongMaterial
  • ...

Lights

  • THREE.PointLight
  • THREE.AmbientLight
  • THREE.SpotLight

Post Processing

Composer and Passes

Shaders

ShaderMaterial and ShaderPass
GLSL
Vertex and Fragment Shaders

Finding your way in THREE.js

Examples
Documentation
Github sources
How to update things

Awesome Inspiration

Tools

Sujet du Workshop

Formes

Exploiter une forme géométrique 2D (simple) dans un espace 3D

Prérequis

  • Three.js
  • Esthétique avant la technique
  • Interactif
  • Fonctionnel online
  • Animation travaillées
  • Javascript (pas de coffee ou autre)
  • 60fps (sur un bon ordi)
  • Pas trop lourd max 25mo
  • Son (musique, bruitages, nappe sonnore, …)
  • En mettre plein la vue :)

Starter Kit

github.com/superguigui/threejs-starter-kit