COS3712 Assessment 2 and 4 Interactive 3D Space Station Project 2026 |Computer Graphics|

UNIVERSITY OF SOUTH AFRICA
College of Science, Engineering and Technology


⋄ ⋄ ⋄ ⋄ ⋄ ⋄ ⋄ ⋄ ⋄⋄


COS3712: Computer Graphics

Assessment 2 & 4 — Interactive 3D Space Station Project

⋄ ⋄ ⋄ ⋄ ⋄ ⋄ ⋄ ⋄ ⋄⋄




COS3712
Module Code:
Computer Graphics
Module Name:
Interactive 3D Space Station
Project Title:
Assessment 2 & 4
Assessment:
2026
Due Date:
Part A: 100% | Part B: 100%
Total Marks:




Submitted in partial fulfilment of the requirements for COS3712 — UNISA 2025

,UNISA | COS3712 Interactive 3D Space Station Project



Question 1: Project Overview and Technology Stack

Question: Describe the overall design of the Interactive 3D Space Station project, including
the tools and technologies selected for implementation, and justify these choices with reference
to the learning objectives.


1.1 Project Description


This project implements a real-time interactive 3D space station that orbits a planet, demon-
strating the core Computer Graphics concepts of transformations, perspective projection, ob-
ject animation, camera navigation, lighting models, shading techniques, and texture mapping
(COS3712 Assessment Brief, 2025). The project is divided into two assessments: Assessment
2 covers space station construction and animation; Assessment 4 covers advanced lighting,
shading, and surface detail.

The implementation uses Three.js (a WebGL abstraction library) together with JavaScript
and GLSL shader language. Three.js was selected because it provides high-level abstractions
over raw WebGL while still exposing shader-level control, making it well suited to implement-
ing all required graphics primitives, lighting models, and mapping techniques (Dirksen, 2023).
The project runs in-browser without any additional installation, which simplifies compilation
verification.

Implementation Insight
Technology Justification: Three.js wraps WebGL’s low-level API in an object-
oriented scene graph. Every transformation (scaling, rotation, translation) maps
directly to Object3D properties. Custom GLSL shaders plug into Three.js’s
ShaderMaterial to implement Phong and Gouraud shading manually, satisfying
the requirement for shader-level control.



1.2 Technology Stack Summary




Page 2 of 20

,UNISA | COS3712 Interactive 3D Space Station Project



Table 1: Technology Stack for COS3712 Space Station Project
Tool / Language Purpose
Layer
WebGL (via Three.js r160) GPU rendering pipeline
Graphics API
JavaScript (ES6+) Scene logic, animation loops, user
Programming input
Language
GLSL (ES 3.00) Custom lighting and shading
Shader Language models
Three.js Scene graph, cameras, primitives,
3D Library lights
NASA public domain images Realistic surface textures
Texture Sources
Visual Studio Code + Live Server Development and real-time pre-
IDE view


Question 2: Assessment 2 – Space Station Structure and Construction

Question: Describe in detail how the 3D space station is constructed using geometric prim-
itives. Your answer must cover the central core, docking modules, solar panel arrays, and
communication towers, and explain how scaling, rotation, and translation are applied to each
component using hierarchical transformations.


2.1 Hierarchical Scene Graph Design


The space station is modelled as a scene graph hierarchy where all components are at-
tached as children to a root stationGroup object. When the root group rotates, all children
rotate with it automatically because Three.js propagates world transformations down the
hierarchy (Dirksen, 2023:87). This directly satisfies the requirement for hierarchical transfor-
mations.

The structure is organised as follows:


2.2 Central Core


The central core is built from a CylinderGeometry (radius 1.5, height 4) with two capped
hemispheres using SphereGeometry at each end. This gives the core a capsule-like silhouette
consistent with real space station designs (Foley et al., 2014:312).

The transformation applied to the core is as follows:



Page 3 of 20

,UNISA | COS3712 Interactive 3D Space Station Project


stationGroup
(Root)



dockingModules commTowers centralCore planet solarArrays
(6x Box) (2x Cylinder) (Cylinder/Sphere) (Sphere) (4x Plane)




dockPort_1..6 solarPanel_1..4


Figure 1: Space Station Scene Graph Hierarchy


// Central Core const coreGeo = new THREE.CylinderGeometry(1.5, 1.5, 4, 32);
const coreMat = new THREE.MeshPhongMaterial( color: 0x888888 ); const core =
new THREE.Mesh(coreGeo, coreMat); core.position.set(0, 0, 0); // Translation:
centred at origin core.rotation.x = Math.PI / 2; // Rotation: align along z-axis
stationGroup.add(core);


The station root group rotates continuously at 0.001 radians per frame:

function animate() requestAnimationFrame(animate); stationGroup.rotation.y +=
0.001; // Slow Y-axis rotation renderer.render(scene, camera);



2.3 Docking Modules (Minimum 6)


Six docking modules are placed symmetrically around the core using BoxGeometry. They are
positioned by computing an angle offset of 60◦ per module:


   
2πi 2πi
xi = r cos , zi = r sin , i = 0, 1, . . . , 5
6 6

where r = 4 is the radial distance from the station centre.

for (let i = 0; i < 6; i++) const angle = (2 * Math.PI * i) / 6; const dockGeo
= new THREE.BoxGeometry(1, 1, 2); const dock = new THREE.Mesh(dockGeo, dockMat);
dock.position.set( 4 * Math.cos(angle), // x 0, // y (same plane as core) 4 *
Math.sin(angle) // z ); dock.lookAt(new THREE.Vector3(0, 0, 0)); // Rotation: face
inward stationGroup.add(dock);




Page 4 of 20

, UNISA | COS3712 Interactive 3D Space Station Project


Key Distinction
Translation vs Rotation: Each docking module undergoes both translation (placing
it at the computed (x, z) coordinate) and rotation (lookAt aligns its face toward the
core). This demonstrates two of the three required transformation types in a single
component.



2.4 Solar Panel Arrays (Minimum 4)


Four solar panel arrays extend from the core along the Y-axis. Each array is a parent group
containing two PlaneGeometry panels (representing the photovoltaic surface) connected by a
thin cylindrical boom.

for (let i = 0; i < 4; i++) const solarGroup = new THREE.Group();
const panelGeo = new THREE.PlaneGeometry(3, 1.5); const panelMat = new
THREE.MeshPhongMaterial( color: 0x1a1aff, side: THREE.DoubleSide ); const panel
= new THREE.Mesh(panelGeo, panelMat); panel.scale.set(1, 1, 0.05); // Scaling:
thin panel solarGroup.position.set( i < 2 ? -5 : 5, // Left or right arm i 0 );
stationGroup.add(solarGroup);


Solar panels rotate on their own axis at a different speed from the station to demonstrate
independent hierarchical animation:

solarPanels.forEach(panel => panel.rotation.z += 0.005; // Independent panel
rotation );



2.5 Communication Towers (Minimum 2)


Two communication towers are placed at the top and bottom poles of the central core. Each
tower is a narrow cylinder (CylinderGeometry with radiusTop: 0.05, radiusBottom:
0.15) with a dish modelled as a ConeGeometry at the tip.

.forEach(side => const towerGeo = new THREE.CylinderGeometry(0.05, 0.15, 2.5, 16);
const tower = new THREE.Mesh(towerGeo, metalMat); tower.position.set(0, side * 3.5,
0); // Translation: pole positions const dishGeo = new THREE.ConeGeometry(0.6,
0.5, 16); const dish = new THREE.Mesh(dishGeo, metalMat); dish.position.set(0, side
* 4.8, 0); dish.rotation.x = side > 0 ? 0 : Math.PI; // Rotation: flip lower
dish stationGroup.add(tower); stationGroup.add(dish); );



Page 5 of 20