This is an experimental project made with Vue.js 2 and three.js. I'm using this to try to learn as many new things as I can. For science!
Demo - https://wforbes.github.io/vue-game
- - Create a basic game loop that runs in Vue.
- - Measure time and display the creation time, current time, and session duration.
- - Track/capture mouse and keyboard input.
- - Disable the default right-click context menu from the browser.
- - Capture when the mouse leaves the page.
- - Capture multiple keyboard presses at once.
- - Render a 3D object on the canvas element from the three.js example on their npm page.
- - Control the 3D object with the mouse input.
- - Measure FPS and fine tune the game loop.
- - Resize the canvas with the browser window.
- - Try adding stats.js for performance monitoring.
- - Only rotate cube when dragging with CTRL + leftClick.
- - When mouse hovers over the cube, highlight the cube slightly.
- - Add more cubes, mimicing threejs Fundamentals, but randomizing their color and x/y positions so that they don't collide
- - Improve mouse/keyboard controls related to camera, scene, and mesh. (three.js controls code)
- - Try some more demos from the three.js examples
- - Experiment with making it mobile friendly.
- - Add a menu page to open different demos
- - Add a way to return to the menu page from the demos
- ... continue to add to this list and see where it goes!
This uses the npm package manager (that comes with and runs on node.js) to automatically install dependencies, run for development, and build for production. I left these instructions here if you aren't familiar.
Running npm install in the terminal from the project directory will install the dependencies listed in ./package.json.
Running npm run serve will compile and run the project in the browser from a local server that recompiles and reloads the app
each time it's saved.
Running npm run build will compile and minify it into the ./dist directory for upload to a production server.