Workbook 7 - Transformation and Hierarchy in THREE.JS

Workbook 7 - Transformation and Hierarchy in THREE.JS

This week, we'll continue to do more THREE programming, with a focus on using THREE's mechanisms for transformation and hierarchy to make more interesting things.

This workbook is due Friday, March 29th. With no late assignments accepted after Monday, April 1.

Learning Goals

  1. To gain some experience doing hierarchical modeling, particularly for animation
  2. To get some practice working with 3D rotations
  3. To get some experience working with the CS559 framework code
  4. To get more practice working with a modern scene graph API
  5. To see some details of how different rotation representation are used
  6. To get some exposure to modern JavaScript features like classes

The readings are here to help you understand the things we discussed in class.

Over the course of this assignment, you will probably need to read a lot of the THREE.js documentation (it's here). Unfortunately, this documentation isn't good to read - its fine for when you need to look things up. So expect to read a lot of pages as you do more programming.

You will also start working with the class framework code. This will require you to spend some time reading the code and its documentation (which is derived from comments in the code). It may also cause you to need to read up on some aspects of JavaScript we haven't used much in class yet.

The textbooks cover the math of the transformations - giving you the matrices. You've already had to read those chapters for prior workbooks. Understanding what happens inside the matrices is useful, so if you haven't already read Chapter 6 of Fundamentals of Computer Graphics (FCG) (FCG4_Ch06.pdf) and the relevant portions of Chapter 6 of The Big Fun Graphics Book (Hart) (Hart06-jan19.pdf), you may want to now.

Hierarchical modeling is discussed briefly in FCG 12.2 (FCG4_Ch12.pdf) and Hart Chapter 7 (Hart07-jan19.pdf). In both cases, the focus is more on how you implement the scene graph traversal using transformation stacks than how to think in terms of hierarchical models. In class, we'll let THREE do this work for us.

The lookfrom/lookat/vup transformation is called the "The Camera Transformation" in FCG (it's 7.1.3 FCG4_Ch07.pdf). Other things in the chapter discuss the Perspective Transformation in depth (no pun intended), and can help you understand these concepts better. Hart discusses lookfrom/lookat in Chapter 8 (Hart08-jan19.pdf), but it adds little beyond what you've seen already. Look at it if you want to see it explained a different way.

The Real Time Rendering book has a very thorough discussion of transformations in Chapter 4 (Sections 4.1-4.3) (RTR4_Ch04.pdf), with significant attention paid to rotations and Quaternions (Section 4.3). This material is beyond what you need for class, but may be a good thing to read if you want a better understanding of 3D transformations.


The main exercises for this workbook are:

Over the next few weeks, we'll be using the framework code to make increasingly interesting objects. The Framework code is evolving, but the idea is that by the end of the semester, all of the objects you make can fit together into Graphics Town.

Bonus Point Opportunities

The requirements for the three main exercises (quadcopter, park, and construction) are pretty minimal. You can get bonus points for making more interesting objects and additional objects.


You will score points for:

  1. Making a quadcopter that flies (1pt)
  2. Having a radar dish that points at the quadcopter as it flies (.5pt)
  3. Placing park equipment (.25pt)
  4. Making the Merry-Go-Round (.75pt)
  5. Making construction equipment (1pt)

For this workbook, there are no questions to answer.

List of Pages

The pages in this workbook are:

Get Started!

Everything begins on page one.