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(75, breite/hoehe)

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)