threejs-playground

Experimenting with Three.js

Setup

Clone the repo. No npm/yarn install required.

Just open index.html in a web browser.

Recommended for dev: install the Live Server extension of VSCode and click on "Go Live" in the status bar.

Three.js: WebGL library. WebGL uses <canvas>.
Without three.js: huge amount of code needed (ex: rotating cube, 200 loc VS 25 loc)

3 things to set up:

Scene (description of the 3D world)
Camera (ex: PerspectiveCamera, which uses a FOV, aspect ratio, near plane and far plane)
Renderer (WebGL, CSS 2D, CSS 3D, SVG)

=> We render a scene with a camera.

Many building blocks: cube, cone, sphere, ...
Can import 3D models from tools such as Blender
Vertex: a point. Triangle = 3 vertices.
- Position (x, y, z), but also rendering info (color, reflectance, ...)
Geometry: vertex data of some piece of geometry like a sphere, cube, ...
Material: color or texture (rock, wood, skin, ...). Can react or not to shadows.
Mesh: geometry + material. Complete object that can be added to the scene.
Shader: a script for scene post-processing such as filters and special effects (ex: blur, volumetric lighting, bump mapping, ...)