I have created a small-scale visual experience using the Three.js library. My application is a rotating cube that can be moved in four directions across the screen using WASD, along with using the up and down arrow keys to bring it forward and backwards in the plane, allowing the user to adjust the perspective. Additinoally, to reset the cube in the scene the user can hit space, such that it won't get lost in the infinite plane. Additionally, I added some basic CSS to remove the scrollbar from the webpage and removed the margins to allow the scene to fill the browser.
Some challenges I faced were defintely scoping this project to be completable in the time given, I ended up having to change directions after realizing what I had planned would not be completed by the deadline. Instead, I opted to do something more simple that still demostrated my knowledge of what I learned using Three.js. An additional challenge was using tweakpane to create a better user interface where the user can customize the cube and how fast it is moving across the scene, however I ran into challegnges getting tweakpane to run on my html page. It is currently implemented in the code, but unknown errors are preventing it from being seen. If I had more time to work on this, my goal would be to have a slider for the color of the cube (in RGB values), a slider for speed of the cube's rotation, and sliders to change to cube's speed in the 6 different directions (left, right, up, down, forward, backward).
The simple instructions for my website are you can use WASD for movement in the x and y plane, along with the up and down arrow keys for movement in the z plane. These are included in the top of the website using HTML and CSS for styling.