CPSC 424 Lab 8: three.js Modeling

Due: Tue 11/4 at the start of lab

three.js provides a high-level scene graph for designing WebGL scenes. This is the first of two labs using three.js. It covers the core elements: cameras, lights, mesh objects using the standard geometries, modeling transforms, and materials (including image textures). The next lab will cover additional ways of building mesh objects, reflection, refraction, shadows, and custom shaders.

Successful completion of this lab means that you can use three.js to:

define and configure a camera (perspective and orthographic)
build mesh objects using the standard geometries
specify modeling transforms
build complex objects and scenes through hierarchical modeling, and include multiple copies of a subtree with different modeling transforms
define different materials with various properties (color, specular color, emissive color, shininess; matte vs shiny; faceted vs smooth; textures)
define and configure different kinds of lights (ambient, directional, point, spot)
define lights who positions are fixed relative to the viewer, the world, and an object

Collaboration and Use of AI

This is an individual lab. You may get technical help from others, but the effort and ideas that go into producing solutions should be yours.

You may use AI as outlined in the Use of AI policy — Copilot's inline coding suggestions, explain, fix, review and comment features but not code generation from English prompts. Also:

Attribution required: you must include a comment in your program indicicating what features you used and how often you used them.
Maintain agency: always be diligent about maintaining agency with your coding and your understanding of the code and the underlying concepts — don't let Copilot become Autopilot!

Handin

Hand in your work by copying your ~/cs424/lab8 folder into your handin folder (/classes/cs424/handin/username, where username is your username).

Check that the result is that your files are contained in /classes/cs424/handin/username/lab8 — if not, fix it!

Preliminaries

Setup

Copy the directory /classes/cs424/threejs and its contents into your ~/cs424/workspace directory. You should end up with a folder threejs inside your workspace directory, with more folders inside of it.
Copy the directory /classes/cs424/lab8 and its contents into your ~/cs424/workspace directory. You should end up with a folder lab8 inside your workspace directory, with files inside of it.
If you haven't previously copied /classes/cs424/textures and its contents into your ~/cs424/workspace directory, do that now. (You don't need to recopy it if you copied it previously — nothing has changed, you'll just need textures for this lab.) Make sure that you end up with the images inside a folder textures which is directly contained within workspace.

Make sure that all of the directories are named exactly as specified and end up at the same (top) level in your workspace directory. This is important so that the relative path names used to access common files remain the same so your program doesn't break when you hand it in.

Provided Code and Files

lab8.html is a template for a three.js program.

Reference

Your best reference sources are the slides from class (which pull out and organize the key points), the examples from class (which put all the pieces together), and the textbook. Chapter 5 covers three.js.

Exercises

Use the provided lab8.html as the starting point for this lab. This file sets up the structure for a three.js program with a trackball rotator (so the mouse can spin the camera around) as discussed in class. Note that running the program will result in a blank page and an error message in the console until a scene and camera have been created. (After that you should at least see a dark gray canvas.)

Follow the TODO prompts to create a simple scene containing a light and a standard-geometry object (box, sphere, cylinder, etc). The type of camera (orthographic or perspective) is up to you.
Build on that starting point to create a scene of your own design which demonstrates the use of three.js. For full credit, your scene must meet the requirements below.

Requirements:

Depict something recognizable and original — objects should be deliberately placed and you can't just copy elements from examples in the book or class. (If you want to use the same kinds of elements, such as a tree or a car, they need to be significantly redesigned.) It's fine to simplify representations, like was done when creating a tree from a cone and a cylinder.
Use elements appropriately e.g. demonstrate a faceted material on something that is supposed to be polyhedral, don't over- or under-light the scene, only apply modeling transforms that have a visible effect (e.g. there's no point in rotating a sphere, rotating by a multiple of 360 degrees, or a uniform scale by 1), etc.
Demonstrate mesh objects created with the standard geometries:
- use at least four different geometries (cylinder, box, cone, sphere, torus, tetrahedron, octahedron, dodecahedron, icosahedron)
Demonstrate modeling transforms:
- use rotation and scale at least once each (they can be applied to the same object or different ones)
- have a least one instance of each of the following combinations (applied to the same object): translation only, translation and rotation, translation and scale, and all three (translation, rotation and scale)
Demonstrate hierarchical modeling:
- at least two different kinds of objects must be made up of several other objects (like a tree made up of a cone and cylinder), grouped together as a subtree of the scene graph (this is two different kinds of objects, such as a tree and a car, not two copies of the same object)
- at least one object must involve three or more levels of hierarchy (the copse from class has three levels — a copse is made up of trees, each of which contains primitive shapes)
- include at least two copies of one complex object (one built with a subtree) with different modeling transforms (clone rather than creating each copy from scratch)
Demonstrate different materials and properties of materials:
- color, specular color, shininess (at least two different values of each, with combinations replicating actual materials — table of some material properties)
- emissive color (at least one material with an emissive color)
- matte (no bright highlights) vs shiny (use both)
- faceted vs smooth (use both, and in one instance make a surface that should be smooth faceted instead to show the effect)
- textures (use at least two different ones)
Demonstrate different types and placements of lights:
- ambient light
- a point light or directional light
- a spotlight
- a viewer light (typically this means shining straight ahead of the viewer, but any position/direction fixed relative to the viewer is fine)
- a light placed in world coordinates (so its position/direction relative to the world does not change even as the camera moves around)
- a lamp, streetlight, or other explicitly modeled light fixture with a visible light bulb
These elements can overlap, for example, the light fixture light can be the spotlight or the point light. The light fixture should involve a light (whose position is fixed relative to the light bulb), a light bulb (an object whose material has an emissive color), and some structure (such as the pole for a streetlight). Also add additional lights as needed to appropriately illuminate the scene, but do not overlight it!

For extra credit, make an especially elaborate scene and/or animate your scene. (Particularly nice would be to animate something with a light, such as a car driving around with its headlights on.) See the two examples in section 5.1.6 in the textbook for how you can add animation. (Note that you don't need to add the "animate" checkbox to the webpage, though you can if you want.)