ThreeJs journey

What is webGL:

• Javascript api
• Render trienagles at remarcable speeds
• result can be drawn in a <canvas>
• compatible most bodern borwsers
• uses the GPU

We need 4 elements for the basic scene

• start from importing Three js

import * as THREE from 'three';

• Scene

  const scene = new THREE.Scene();

• Object

  • Objects can be many things. You can have primitive geometries, imported models, particles, lights, and so on.
  • There are many geometries and many materials, but we will keep things simple for now and create a BoxGeometry and a MeshBasicMaterial.

• Camera

• Renderer

Transforming an object

• ther are 4 properties to transform an object

  • position
  • scale
  • rotation
  • quaternion

• All classes inherit from the Object3D possesses those preoerties like ProsperciveCamera or Mesh, check three js docs