three.js

Et rammeverk for å lage WebGL-ting.

1 / 42

three.js

WebGL er veldig lavnivå

For å lage en snurrende kube trenger du ganske mye kode

2 / 42

three.js

WebGL er veldig lavnivå

For å lage en snurrende kube trenger du ganske mye kode

three.js kommer med abstraksjoner 👌

Et nivå som ligger nærmere måten vi prater om 3D-verdenen på.

3 / 42

three.js
Core
Kjernekomponenter
Renderer
Scene
Camera

4 / 42

three.js

Core

Renderer

Three.js kommer med mange ulike måter å rendre på, men den vi skal bry oss om er WebGL rendereren

5 / 42

three.js

Core

Renderer

Three.js kommer med mange ulike måter å rendre på, men den vi skal bry oss om er WebGL rendereren

renderer = new THREE.WebGLRenderer();
renderer.setSize(HEIGHT,WIDTH);

6 / 42

three.js

Core

Renderer

Three.js kommer med mange ulike måter å rendre på, men den vi skal bry oss om er WebGL rendereren

renderer = new THREE.WebGLRenderer();
renderer.setSize(HEIGHT,WIDTH);

Three.js har også CSS2D/3DRenderer, CanvasRenderer og SVGRenderer

7 / 42

three.js

Core

Scene

For at en renderer skal ha noe å tegne trenger den en scene.

8 / 42

three.js

Core

Scene

For at en renderer skal ha noe å tegne trenger den en scene.

scene = new THREE.Scene();
// ...
scene.add(someObject);

9 / 42

three.js

Core

Scene

For at en renderer skal ha noe å tegne trenger den en scene.

scene = new THREE.Scene();
// ...
scene.add(teapot);

altxt

10 / 42

three.js

Core

Camera

For å komplettere 3D-opplevelsen trenger rendereren også noe som kan se på scena: et kamera.

11 / 42

three.js

Core

Camera

For å komplettere 3D-opplevelsen trenger rendereren også noe som kan se på scena: et kamera.

Kameraet bestemmer hvordan 3D-verdenen blir projisert på skjermen.

12 / 42

three.js

Core

Camera

For å komplettere 3D-opplevelsen trenger rendereren også noe som kan se på scena: et kamera.

Kameraet bestemmer hvordan 3D-verdenen blir projisert på skjermen.

Det finnes mange ulike kamera i three.js, vi kommer til å bruke et som heter PerspectiveCamera

13 / 42

three.js

Core

Camera

For å komplettere 3D-opplevelsen trenger rendereren også noe som kan se på scena: et kamera.

Kameraet bestemmer hvordan 3D-verdenen blir projisert på skjermen.

Det finnes mange ulike kamera i three.js, vi kommer til å bruke et som heter PerspectiveCamera

camera = new THREE.PerspectiveCamera(
  fov,
  aspectRatio,
  near,
  far
)

14 / 42

three.js

Core

Alt klart

Når vi har disse tre tingene kan vi rendre en vilkårlig 3D-verden:

15 / 42

three.js

Core

Alt klart

Når vi har disse tre tingene kan vi rendre en vilkårlig 3D-verden:

renderer.render(scene, camera);

16 / 42

three.js

Core

Alt klart

Når vi har disse tre tingene kan vi rendre en vilkårlig 3D-verden:

renderer.render(scene, camera);

Når vi har dette på plass vil resten gå ut på å legge til objekter til scena slik at rendereren kan rendre det til skjermen.

17 / 42

three.js

Core

Objects

Fellestrekk

I three.js har alle objekter noen fellestrekk

Posisjon
Rotasjon
Scale
Children

18 / 42

three.js

Core

Objects

Fellestrekk

I three.js har alle objekter noen fellestrekk

Posisjon
Rotasjon
Scale
Children

(... og en del andre ting som er litt mer nisje)

19 / 42

three.js

Core

Objects

Spesialobjekter

I tillegg til en del spesialobjekter (som feks scene, camera og lights) har three.js en rekke generiske objekter

20 / 42

three.js

Core

Objects

Spesialobjekter

I tillegg til en del spesialobjekter (som feks scene, camera og lights) har three.js en rekke generiske objekter.

Generiske objekter

Generiske objekter kan lages ved å kombinere en geometri og et materiale.

21 / 42

three.js

Core

Objects

Geometries

Geometrier er three.js sin måte å representere form på.

22 / 42

three.js

Core

Objects

Geometries

Geometrier er three.js sin måte å representere form på.

Det finnes mange ulike geometrier innebygd:

Box
Circle
Cone
Plane
Polyhedra
etc

23 / 42

three.js

Core

Objects

Geometries

Geometrier er three.js sin måte å representere form på.

Det finnes mange ulike geometrier innebygd:

Box
Circle
Cone
Plane
Polyhedra
etc

geometry = new THREE.BoxGeometry(1, 1, 1);

24 / 42

three.js

Core

Objects

Geometries

Geometrier er three.js sin måte å representere form på.

Det finnes mange ulike geometrier innebygd:

Box
Circle
Cone
Plane
Polyhedra
etc

geometry = new THREE.BoxGeometry(1, 1, 1);

De fleste 3D-former har en geometri-funksjon i three.js

25 / 42

three.js

Core

Objects

Materials

Materialer i three.js er måten objekter får utseende.

26 / 42

three.js

Core

Objects

Materials

Materialer i three.js er måten objekter får utseende.

Ulike materialer har ulike egenskaper og interaksjoner med andre objekter.

27 / 42

three.js

Core

Objects

Materials

Materialer i three.js er måten objekter får utseende.

Ulike materialer har ulike egenskaper og interaksjoner med andre objekter.

Det finnes egne materialer for spesielle lysmodeller eller materialer som bruker custom shadere.

28 / 42

three.js

Core

Objects

Materials

Materialer i three.js er måten objekter får utseende.

Ulike materialer har ulike egenskaper og interaksjoner med andre objekter.

Det finnes egne materialer for spesielle lysmodeller eller materialer som bruker custom shadere.

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

29 / 42

three.js

Core

Objects

Når du har en geometri og et materiale kan du lage et objekt.

30 / 42

three.js

Core

Objects

Når du har en geometri og et materiale kan du lage et objekt.

Det finnes også ulike objekt-typer, men den vanligste er Mesh:

31 / 42

three.js

Core

Objects

Når du har en geometri og et materiale kan du lage et objekt.

Det finnes også ulike objekt-typer, men den vanligste er Mesh:

object = new THREE.Mesh(geometry, material);
scene.add(object);

32 / 42

three.js

Core

Objects

Extra

Ekstrastasj

thee.js inneholder en del ekstrastasj

33 / 42

three.js

Core

Objects

Extra

Ekstrastasj

thee.js inneholder en del ekstrastasj

lys
loaders
animasjon
mattefunksjoner
etc...

34 / 42

three.js

Core

Objects

Extra

Animering

Endre på ting

Det er kjedelig å bare lage statiske modeller.

35 / 42

three.js

Core

Objects

Extra

Animering

Endre på ting

Det er kjedelig å bare lage statiske modeller.

Heldigvis har three.js støtte for å endre på ting.

36 / 42

three.js

Core

Objects

Extra

Animering

Endre på ting

Det er kjedelig å bare lage statiske modeller.

Heldigvis har three.js støtte for å endre på ting.

renderer.render(scene, camera);
cube.position.x = 10;
renderer.render(scene, camera);
// hurra, cube har flyttet seg 10 langs x-aksen

37 / 42

three.js

Core

Objects

Extra

Animering

JavaScript animasjon

Fordi objects i three.js er "vanlig" JS, kan vi bruke vanlige JS-teknikker for å animere

38 / 42

three.js

Core

Objects

Extra

Animering

JavaScript animasjon

Fordi objects i three.js er "vanlig" JS, kan vi bruke vanlige JS-teknikker for å animere

function render() {
  requestAnimationFrame(render);
  // move stuff around
  renderer.render(scene, camera);
}

39 / 42

three.js

Core

Objects

Extra

Animering

Boilerplate

Utdelt kode

Dere får en veldig liten kodesnutt utdelt som dere kan bruke som utgangspunkt for oppgavene dere skal gjennom i dag.

40 / 42

three.js

Core

Objects

Extra

Animering

Boilerplate

Utdelt kode

Dere får en veldig liten kodesnutt utdelt som dere kan bruke som utgangspunkt for oppgavene dere skal gjennom i dag.

// Henter inn three.js
const THREE = require("three");
function init() {
  // Her kan du putte kode som bare skal gjøres én gang
}
function render() {
  // sørger for å køe et nytt kall til render
  requestAnimationFrame(render);
  // Her kan du putte kode som skal gjøres hver "frame",
  // som feks renderer.render();
  // eller box.position.x += 10
}
init();
render();

41 / 42

Oppgavetid!

Oppgavene finner dere på github.com/bekk/3d-visualisering-kursserie

altxt

42 / 42

Help

Keyboard shortcuts

↑, ←, Pg Up, k

Go to previous slide

↓, →, Pg Dn, Space, j

Go to next slide

Home

Go to first slide

End

Go to last slide

Number + Return

Go to specific slide

b / m / f

Toggle blackout / mirrored / fullscreen mode

Clone slideshow

Toggle presenter mode

Restart the presentation timer

?, h

Toggle this help