A Museum that goes throw the history of video game characters. The idea is to create models through different eras of video game models, from low poly (like tomb raider) to high poly.
- Move the code into node.js and configure webpack
- Add Loader for models
- Configure Engine Mechanisms
- Add shaders
- Create the museum walls including textures (should be kinda basic)
- Add Models for the museum
- Add lights for the exhibits
- (Extra) Add Model viewer to see every aspect of the models.
- (Extra) Add secret room with extra models
- (Extra) Add more rooms to the museum
- Add colliders for the walls and models
- Add custom colliders
- (Extra) Add the ability to use a ramp
- Add triggers
- Add pointer trigger functionality
- Add descriptions for the Models, includes clicking on the models
- (Extra) Add outline for pointed items
- Make the lights togglable from the menu
- (Extra) Add switches for the lights
- Add functionality to allow outside scripts to toggle lights
- Add switches, animate them and add toggle functionality
- Install Node.js version 9.7.1 or above
- Open a Console on the directory where you want to save the repository
- Use the " git clone https://github.com/BMourtzis/CompGraphicsUTS.git " (you need to install git if you already haven't. If you find git difficult to use, the install github for Desktop)
- Run "npm install" and wait to install all the dependencies
- Run "npm start" and wait to compile, a browser tab will open
When you run "npm start" you start a nodejs server using webpack. This server operates on localhost:8080 and that's where it exposes index.html. Webpack bundles index.js into bundles.js and saves it at the "dist" directory, however webpack is clever enough to see that index.js requires other .js files and bundles them as well in bundle.js file.
In order to expose other types of files to the "web", for example character models, just add them under the "dist" directory (make sure that you create a folder, so that dist stays structured).
When you are trying to load a model, enter the path as if your current directory position is index.html.
Index.js initializes a script called engine, which creates the 3 most important components: camera, scene and the WebGL Renderer. It also adds some additional configurations like fog, and a window resize event. The engine script exposes 4 objects: scene, camera, renderer and engine. The engine object has 2 functions: the init, which initialises the objects and crates the update loop and the addUpdate, which adds functions to the update loop.
There is an example file under the src directory that explains how to create a new component