Hackathon: Creating Three.js Objects

Mar showed us the basics of three.js and how to code simple 3D objects to move on the screen.

We referenced two online scripts which included the three.js library and an orbit controls script.
CSS was added so that a canvas could be defined with no margin.

We then created four variables:

• 'scene' created a new 3D scene.
• 'camera' created a new perspective camera which renders a similar view to what the human eye can see and is therefore the most common camera used to render 3D objects. 

The way that the camera variable is constructed is to define the camera's viewing Frustum.

PerspectiveCamera( vertical field of view, aspect ratio, near plane, far plane )

(Analytical Graphics inc, 2018)

• 'control' created the orbit controls that is assigned to the variable camera as these controls will control the camera, meaning that when the user is using these controls the shapes would appear to move because the camera has been moved.
• 'rendered' created the 3D rendered.

The size of the renderer was then set to the inner width and height of the window.

The three.js element was assigned to the document body and renderers the coded objects.

We then created our objects, and added the variable 'geometry' which created a new 3D box with the dimensions (height, width, depth) of (1, 1, 1) making the box equal in size. The variable, 'material' was added where we gave each object a colour and the variable 'material' was displayed as a wireframe (outline only) as this was set to true. The variable 'cube' created a 3D mesh of the object and was assigned to a geometry and material. Therefore when each cube was added to the scene, the variable, 'cube, cube2 and cube3' was assigned which included the geometry and material of the object as this was added previously. The position set for the variable 'cube2' was -10 in depth and therefore was displayed behind the variable 'cube'. 

Mar then explained that we could also add spheres to our scene. 

We created the variable, 'geometrySphere' which created a new sphere with the dimensions of (5, 32, 32). The variable 'sphere' was created that added a new 3D mesh which included the sphere's geometry and the material. The object was added to the scene and the position was set to -100 in depth so that it was behind 'cube2'.

The depth of the camera's position was set to 5 so that it was above the objects.

We then added a function which would animate the objects and cause the cube to rotate on it's x and y-axis at 0.01 seconds per frame. The controls would update using a pre-set function and the scene and camera would render.

The animate function is called at the end of the script.

Video displaying rendered scene

Bibliography
ANALYTICAL GRAPHICS, INC. (2018). View Frustum. [Online] Available at: http://help.agi.com/AGIComponentsJava/html/GraphicsCameraViewFrustum.htm [Accessed: 13 December 2018]

THREEJS. (n.d.). PerspectiveCamera. [Online] Available at: https://threejs.org/docs/#api/en/cameras/PerspectiveCamera [Accessed: 13 December 2018]