i
X

Graphics Assignment Archive

About

>Back in late 2017, I had an assignment for my Computer Graphics module to make an interactive room, but only managed to load a room with an orbiting camera positioned too close to the centre. After finishing university, I put aside any new projects or reworks to start from a simpler point in development before revising on my knowledge of computer graphics. After gradually re-learning parts of ThreeJS with some projects, I decided to redo my assignment. However, as I wasn't nearly ready with scene interactions and 3D web animations (at least in this framework), not to mention the room missing doors and assets that couldn't load, I repurposed my assignment to a sort of museum piece to describe the idea behind certain parts, and also work on some web design skills.


Manual

>To begin navigating the scene, just click anywhere on the scene itself.


Controls:

Click on the spinning shapes when they go red to reveal information about the section of the scene. This will take you out of the scene to avoid any missteps when reading. To close the card, click anywhere on the screen, and then click on that spot again to re-enter the world.


You can adjust the atmosphere of the scene by opening up the "Controls" panel when in selection mode (top right corner). From here, you can toggle between day and night, set the strength of the ambient lights, and even change the sky colour (to give you a very outworldly look 👽).


Sources

Framework: Three.js

The room was built using Three.js editor with some props and furniture being made in Blender

Brick wall texture

Table surface


© Emir Atik (kaganema.github.io)