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
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 :)