CSE 160 - Program 5

Matthew Chen
mchen146
6 June 2021

Links:

Driver
main.js
three.js library
editor.js
cuon-matrix-cse160.js
driver assets
op-ed
video

Description:

This program uses the three.js library to construct 3D objects and scenery. The program consists of two parts.

The first part is the building stage, taking place in a plane hangar. The scene uses various spotlights and a directional light to create an interesting atmosphere. Post processing effects are used for effects like glow. A cubemap is also used for more realistic reflections. In this stage, the user is able to construct a plane using basic primitive meshes, such as cubes, cylinders, and spheres. These meshes can be transformed and reorganized in a scene tree hierarchy. Their tint color can also be modified. Note that the center of the plane cannot be moved, and the user should try to build according to the center. The center is where primitives are first created.

The second part is the flying stage, taking place on an ocean. In this stage, the user is able to control the plane with the keyboard. The plane can speed up and slow down, and the pitch, yaw, and roll can all be affected. The speed (SPD) and altitude (ALT) are displayed, and the line at the center indicates the current roll and pitch, relative to the horizon. The plane cannot stop. The ocean is constructed using the three.js Water object. There are no collisions.

Usage:

Building Stage:

Camera:
Click and drag the canvas to rotate the view. This rotates the camera around the origin. Scroll with mouse wheel to move closer and further from the origin. Hold shift and scroll to adjust camera height.
Building:
Select objects by clicking them. They can be selected from the scene tree or directly. Deselect objects by clicking on no objects. Open the context menu for objects by right-clicking them (scene tree or directly). Here, the object can be deleted or duplicated, which affects all children of the object. Duplicated objects are siblings of the original object. Click on a primitive in the Insert Object container to add a primitive to the scene. If an object is selected, the primitive will be a child of the selected object, else it will be added to the root. Objects can be reorganized in the parent hierarchy by clicking and dragging them in the scene tree. The yellow box shows the new target parent of the selected object. Drop the object to apply. Note that transformations do not change and stay local. Object properties can be changed in the Properties container. Object transformations can be applied in the properties, or by using the 3D transform tools. They will appear when an object is selected. The mode can be switched from translation to rotation to scale, by the transformation buttons at the top. The transformation space can also be changed between World and Local space. When finished, the Launch button can be pressed to initiate the change to the flying stage.

Flying Stage:

Once flying, the plane can be controlled using the arrow keys, QEASDW, and KI.
Left and Right or Q and E control the rolling of the plane.
A and D control the yawing of the plane.
Up and Down or I and K control the pitching of the plane.
W and S control the speed of the plane.

Output Preview:

Driver Preview