PROJECTION MAPPING
THREE.JS
WHAT IS IT?
- A high-level JavaScript library for creating and displaying 3D graphics in web
browsers
- Simplifies 3D graphics creation and animation (models, particle systems, lights,
cameras) without low-level WebGL code knowledge
-
1) Scene: Bevat alles wat bekenen wordt
Onder de scene is alles een parent sibling relatie
o Voordeel: Goed voor organisatie, overerving van transformaties
2) Camera: Bepaalt wat bekeken wordt door een user in die tijd
3) Renderer: neemt informatie van de scene en camera en geeft een foto of
reeks fotos door aan de gebruiker
Voor animaties of interactiviteit wordt de renderer meerdere keren
geroepen (= 60 fps of meer), vandaar de loop bij de renderer
, BASICS
IMPORT THREE.JS
import * as THREE from 'three';
INITIALIZE THE SCENE
const scene = new THREE.Scene()
ADD OBJECTS TO THE SCENE
const cubeGeometry = new THREE.BoxGeometry(1,1,1)
const cubeMaterial = new THREE.MeshBasicMaterial({color: "red"})
const cubeMesh = new THREE.Mesh(
cubeGeometry,
cubeMaterial
)
scene.add(cubeMesh)
INITIALIZE THE CAMERA
const camera = new THREE.PerspectiveCamera(
35,
window.innerWidth / window.innerHeight,
0.1,
35)
camera.position.z = 5
INITALIZE THE RENDERER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Starter</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<canvas class="threejs"></canvas>
<script type="module" src="./script.js"></script>
</body>
</html>
const canvas = document.querySelector('canvas.threejs')
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.render(scene, camera)
THREE.JS
WHAT IS IT?
- A high-level JavaScript library for creating and displaying 3D graphics in web
browsers
- Simplifies 3D graphics creation and animation (models, particle systems, lights,
cameras) without low-level WebGL code knowledge
-
1) Scene: Bevat alles wat bekenen wordt
Onder de scene is alles een parent sibling relatie
o Voordeel: Goed voor organisatie, overerving van transformaties
2) Camera: Bepaalt wat bekeken wordt door een user in die tijd
3) Renderer: neemt informatie van de scene en camera en geeft een foto of
reeks fotos door aan de gebruiker
Voor animaties of interactiviteit wordt de renderer meerdere keren
geroepen (= 60 fps of meer), vandaar de loop bij de renderer
, BASICS
IMPORT THREE.JS
import * as THREE from 'three';
INITIALIZE THE SCENE
const scene = new THREE.Scene()
ADD OBJECTS TO THE SCENE
const cubeGeometry = new THREE.BoxGeometry(1,1,1)
const cubeMaterial = new THREE.MeshBasicMaterial({color: "red"})
const cubeMesh = new THREE.Mesh(
cubeGeometry,
cubeMaterial
)
scene.add(cubeMesh)
INITIALIZE THE CAMERA
const camera = new THREE.PerspectiveCamera(
35,
window.innerWidth / window.innerHeight,
0.1,
35)
camera.position.z = 5
INITALIZE THE RENDERER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Starter</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<canvas class="threejs"></canvas>
<script type="module" src="./script.js"></script>
</body>
</html>
const canvas = document.querySelector('canvas.threejs')
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.render(scene, camera)
