ThreeJS

https://threejs.org/
https://threejsfundamentals.org/
https://threejs.org/editor/ (Szenen und Objekte erstellen und expportieren)
https://threejs-journey.com/ Bruno Simon Course (registriert mit dev@stephanschlegel.de)

ThreeJS - Snippets

Basics

Basic Scene

// Canvas
const canvas = document.querySelector('canvas')
console.log(canvas)
// Scene
const scene = new THREE.Scene()
// Red cube
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({
  color: '#ff0000'
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Sizes
const sizes = {
  width: 800,
  height: 600,
}
const fov = 75

// Camera (field of view, aspect ratio)
const camera = new THREE.PerspectiveCamera(fov, sizes.width / sizes.height)
camera.position.z = 3 // move camera a little backward
scene.add(camera)

// Renderer
const renderer = new THREE.WebGLRenderer({
  canvas: canvas
})
renderer.setSize(sizes.width, sizes.height) // renderer needs size too
renderer.render(scene, camera)

Basic animation example

// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ 
    color: 0xff0000 
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Sizes
const sizes = {
    width: 800,
    height: 600
}

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)

// ANIMATIONS
const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()
    //console.log(elapsedTime)
    
    // rotate the cube
    mesh.rotation.y = elapsedTime * Math.PI * 0.1

    // circular movement of camera
    camera.position.y = Math.sin(elapsedTime)
    camera.position.x = Math.cos(elapsedTime)
    camera.lookAt(mesh.position)
    
    // Render new setting
    renderer.render(scene, camera)
    
    // tell JS to call tick on the next frame
    window.requestAnimationFrame(tick) 
}

// GO...
tick()

Camera

Perspective Camera

Entspricht etwa einem regulären Objektiv.

const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

Field of View (FOV) Gibt die Brennweite vor. Gute Werte sind zwischen 45 (Weitwinkel) und 75 (Tele)

Aspect Ratio Das Seitenverhältnis des Renderbereichs. Da hier nur eine Zahl angegeben wird muss man dem Renderer noch die Endbreite mitgeben.

renderer.setSize(breite, hoehe)

Near, Far - gibt an ab welcher Entfernung Objekte nicht mehr angezeigt werden. Vermeide Extreme Werte, da diese zu Glitches führen können (z-fighting)

const camera = new THREE.PerspectiveCamera( 55, width / height, 0.1, 100 );

Orthographic Camera

Diese Kamera hat keine Brennweite / Perspektive. D.h. entfernte Objekte erscheinen gleich groß wie nahe Objekte. Man übergibt 4 Werte: links, rechts, oben, unten

const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );

Achtung das Bild kann verzerrt erscheinen, wenn die Höhe und Breite des Renderers nicht zu diesen Werten passen. Kann man z.B. so einstellen:

const aspectRatio = width/height // width and height of renderer viewport
const camera = new THREE.OrthographicCamera(-1 * aspectRatio,1 * aspectRatio,1,-1)

Debugging

Debug UI

Dat.GUI ist (Ende 21) nicht mehr aktuell. Stattdessen kann man lil-gui verwenden.

   Dat.GUI https://github.com/dataarts/dat.gui
   lil-gui https://lil-gui.georgealways.com/
   control-panel https://github.com/freeman-lab/control-panel
   ControlKit https://github.com/automat/controlkit.js
   Uil https://github.com/lo-th/uil
   Tweakpane https://cocopon.github.io/tweakpane/
   Guify https://github.com/colejd/guify
   Oui https://github.com/wearekuva/oui
   Bruno Simon's debug panel https://bruno-simon.com/#debug

lil-gui

Mit Webpack / npm

npm i --save lil-gui