📗 3D cues from 2D images include:
➭ Occlusion.
➭ Perspective.
➭ Lighting.
➭ Texture.
📗 3D can be inferred (incorrectly) from 2D drawings, like 3D street art illusions: Link.
📗 The steps to draw a cube:
➭ Create the canvas and set up.
➭ Create the world.
➭ Create the cube and put it into the world.
➭ Give it a Material (how it should look).
➭ Make a Camera (transform 3D to 2D).
➭ Draw. Demo hello_cube
📗 let renderer = new THREE.WebGLRender({canvas : canvas}) creates the 3D "context" for the Canvas canvas: Doc.
📗 let scene = new THREE.Scene(); creates the root of the tree: a container for objects: Doc.
📗 let geometry = new THREE.BoxGeometry(1, 1, 1); produces a collection of triangles that form a cube or box. Every geometry is made up of triangles: Doc
📗 let material = new THREE.MeshStandardMaterial({ color: "green" }); creates the material (what the object is made out of). Materials include surface properties and how it interacts with light: Doc.
📗 let mesh = new THREE.Mesh(geometry, materials); creates a THREE graphics object: Doc.
➭ Note: unfortunate naming, in computer graphics, a "Mesh" usually means a collection of triangles (which is "Geometry" in THREE.js).
📗 scene.add(mesh) addes the mesh into the scene.
📗 let camera = new THREE.PerspectiveCamera(); creates a camera that projects the scene onto the screen. Camera is a viewing transformation from the scene coordinates to the screen coordinates: Doc.
📗 renderer.render(scene, camera); draws everything (takes a picture of the scene using the camera). Animation loop can be used if the scene or the camera is updated every frame.
📗 If a perspective camera is used, a light needs to be added to the scene so anything can be seen. Common types of lights in THREE:
➭ Ambient: lights all objects equally: Doc.
➭ Point: emits light in all directions from a point like a light bulb: Doc.
➭ Directional: emits light in a specific direction like the sun light: Doc.
➭ Spot: emits light from a point in one direction that forms a cone: Doc.
📗 Lights are just objects in THREE. They have position and orientation like other objects.
📗 Change the position of the light so that only one of the objects can be seen.
📗 Change the color of the light so that only one of the objects can be seen. Demo light
📗 The object's material responds to lights.
📗 The color of a point (pixel) depends on:
➭ The surface properties (shininess, roughness, metalness).
➭ The surface orientation.
➭ The color and intensity of the light.
➭ The direction of the light.
📗 Local lighting refers light that travels directly from source to a point: no shadows, reflections, spill.
📗 Orthographic camera uses orthographic projection: Wikipedia.
📗 Orthographic camera in THREE is OrthographicCamera(left, right, top, bottom, near, far) specifies the box it sees. The objects inside the box (called camera frustum) are visible to the camera: Doc.
📗 Perspective camera uses perspective projection: Wikipedia.
📗 Perspective camera in THREE is PerspectiveCamera(fov, aspect, near, far) specifies the (vertical) field of view in degrees, the aspect ratio (should match the canvas), and the distance of the near and far planes (the volumn between the two planes is the camera frustum): Doc.
📗 Camera diagrams: Doc. Math Notes:
The camera transformation (in homogeneous coordinates) is linear with the transformation matrix, \(\begin{bmatrix} d & 0 & 0 & 0 \\ 0 & d & 0 & 0 \\ 0 & 0 & 0 & 1 \\ 0 & 0 & 1 & 0 \end{bmatrix}\), when when applied (multiplied) by a point in 3D in homogeneous coordinates \(\begin{bmatrix} x \\ y \\ z \\ 1 \end{bmatrix}\), the resulting point in 2D is given by \(\begin{bmatrix} d \dfrac{x}{z} \\ d \dfrac{y}{z} \end{bmatrix}\).
📗 Camera is an object in the scene: the same transformations applied to the objects can be applied to the camera.
📗 Camera can be specified by:
➭ position (or lookFrom): where to put the camera.
➭ lookAt: points the camera at a point.
➭ up (or vUp): extra degree of freedom to specify the direction of up by rotating the camera.
📗 Note: camera.position and camera.up are Vector3s: Doc, and camera.lookAt(...) is a function.
📗 Professor Gleicher's demo: Link.
📗 Animation loop is the same as in 2D with window.requestAnimationFrame(...);
📗 The drawing function should update the objects in the scene after each frame then call renderer.render(scene, camera).
📗 THREE is a scene-graph API, so objects are updated, not redrawn (re-created) after every frame like in HTML Canvas.
📗 Animate the red object so it rotates on the ground.
📗 Animate the green object so it jumps on the ground.
📗 Animate the blue object so it shrinks and expands in size. Demo action_state
📗 Animate the red object so it rotates on the ground.
📗 Animate the green object so it jumps on the ground.
📗 Animate the blue object so it shrinks and expands in size (cannot be done here). Demo action_transform
📗 3D graphics abstractions.
📗 THREE.js basics.
📗 Lights and materials.
📗 Camera and projection.
📗 Object hierarchy.
📗 Animation loop.
📗 Notes and code adapted from the course taught by Professor Michael Gleicher.
📗 Please use Ctrl+F5 or Shift+F5 or Shift+Command+R or Incognito mode or Private Browsing to refresh the cached JavaScript: Code.
📗 You can print the notes: .
📗 Anonymous feedback can be submitted to: Form.