Summary
Summary Complete beginners guide to Three.js
- Course
- Institution
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
[Show more]
Seller
Follow
woutnba
Content preview
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)
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller woutnba. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $6.43. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
49497 documents were sold in the last 30 days
Founded in 2010, the go-to place to buy study notes for 14 years now