>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.
This is the mobile compatible version of the project, which contains an earlier implementation of the project with just an orbit view of the scene. To view the complete version (that allows you to navigate in first-person view), please visit this page.
Click or touch down to rotate the camera. Use the mouse wheel or slide two fingers on the screen to zoom.
You can also 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 👽).
Framework: Three.js
The room was built using Three.js editor with some props and furniture being made in Blender
