three.js workshop

about me

  • webdev since ~2000
  • currently creative developer at ubilabs
  • {live:JS} core member
  • community-organizer
  • Musician, SciFi + Space-Nerd

rough schedule

  • intro + planning (~30min)
  • first steps with three.js (~60min)
  • coffee-break
  • 3D graphics: background, terminology, math (~90min)
  • break
  • advanced topics (~90min)
  • coffee-break
  • idk.. questions, examples, help (~90min)

please interrupt me anytime with questions etc.

why are you here?

get to know three.js

<!doctype html>
<style>
  body { margin: 0; } 
  canvas { width: 100vw; height: 100vh; }
</style>
<script src="https://threejs.org/build/three.js"></script>
<script>
  const w = window.innerWidth;
  const h = window.innerHeight;
  
  const renderer = new THREE.WebGLRenderer();
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(60, w / h, 0.1, 100);
  
  renderer.setSize(w, h);
  
  scene.add(new THREE.GridHelper(10, 10));
  
  camera.position.set(3, 3, -2);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  
  document.body.appendChild(renderer.domElement);
  renderer.render(scene, camera);
</script>
const renderer = new THREE.WebGLRenderer();  

renderer.setSize(
  window.innerWidth, 
  window.innerHeight
);
  
// setup the camera, scene and content
  
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

renderer

const renderer = new THREE.WebGLRenderer();  

renderer.setSize(window.innerWidth, window.innerHeight);

// setup the camera, scene and content

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

window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
});

document.body.appendChild(renderer.domElement);
requestAnimationFrame(renderloop);

renderer

const w = window.innerWidth;
const h = window.innerHeight;

const camera = new THREE.PerspectiveCamera(60, w / h, 0.1, 100);

camera.position.set(3, 3, -2);
camera.lookAt(new THREE.Vector3(0, 0, 0));

camera

  • parameters: field of view, aspect-ratio, near-plane distance, far-plane distance
  • position and orientation in space
const w = window.innerWidth;
const h = window.innerHeight;

const camera = new THREE.PerspectiveCamera(60, w / h, 0.1, 100);

camera.position.set(3, 3, -2);
camera.lookAt(new THREE.Vector3(0, 0, 0));

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
});

camera

<script src="https://threejs.org/examples/js/controls/OrbitControls.js">

controls

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

function renderloop(t) {
  requestAnimationFrame(renderloop);

  controls.update();
}

requestAnimationFrame(renderloop);

scene-content

  • the scene is the root-object of a tree-structure (like the DOM)
  • all objects are of type THREE.Object3D
  • .add(), .traverse(), .remove(), .parent, .children
  • common properties: position, rotation, scale
scene.add(new THREE.GridHelper(10, 10));

scene-content

const object3D = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({
    color: 0xccff22
  })
);

scene.add(object3D);
  • most of the time, you will be using THREE.Mesh
  • contains a geometry and a material
  • geometry: contains vertices and faces (triangles) of the object
  • material: describes how the object should interact with light

scene-content

const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
const ambLight = new THREE.AmbientLight(0xffffff, 0.3);

dirLight.position.set(1, 2, 0);

scene.add(dirLight, ambLight);
  • most materials describe interaction with light
  • lights need to be added to the scene
  • AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight

your turn

  • get a simple html-page and your editor of choice running (codepen, local http-server, webpack, whatever you like)
  • add three.js from https://threejs.org/build/three.js or via `npm install three`
  • play around

useful tools

jsdays three.js full-day workshop

By Martin Schuhfuss

jsdays three.js full-day workshop

  • 1,320