Samenvatting
Summary Complete beginners guide to Three.js
- Instelling
- Odisee Hogeschool (Odisee)
In this guide you'll learn the complete basics to T and learn how to create your own stunning 3D graphics in a web based environment
[Meer zien]Voorbeeld 2 van de 11 pagina's
Voorbeeld 2 van de 11 pagina's
In winkelwagenVerkoper
Volgen
Voorbeeld van de inhoud
PROJECTION MAPPINGTHREE.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)
Voordelen van het kopen van samenvattingen bij Stuvia op een rij:
√ Verzekerd van kwaliteit door reviews
Stuvia-klanten hebben meer dan 700.000 samenvattingen beoordeeld. Zo weet je zeker dat je de beste documenten koopt!
Snel en makkelijk kopen
Je betaalt supersnel en eenmalig met iDeal, Bancontact of creditcard voor de samenvatting. Zonder lidmaatschap.
Focus op de essentie
Samenvattingen worden geschreven voor en door anderen. Daarom zijn de samenvattingen altijd betrouwbaar en actueel. Zo kom je snel tot de kern!
Veelgestelde vragen
Wat krijg ik als ik dit document koop?
Je krijgt een PDF, die direct beschikbaar is na je aankoop. Het gekochte document is altijd, overal en oneindig toegankelijk via je profiel.
Tevredenheidsgarantie: hoe werkt dat?
Onze tevredenheidsgarantie zorgt ervoor dat je altijd een studiedocument vindt dat goed bij je past. Je vult een formulier in en onze klantenservice regelt de rest.
Van wie koop ik deze samenvatting?
Stuvia is een marktplaats, je koop dit document dus niet van ons, maar van verkoper woutnba. Stuvia faciliteert de betaling aan de verkoper.
Zit ik meteen vast aan een abonnement?
Nee, je koopt alleen deze samenvatting voor €5,99. Je zit daarna nergens aan vast.
Is Stuvia te vertrouwen?
4,6 sterren op Google & Trustpilot (+1000 reviews)
Afgelopen 30 dagen zijn er 49497 samenvattingen verkocht
Opgericht in 2010, al 14 jaar dé plek om samenvattingen te kopen