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()