This is a project I realized by following and extending Emilian Kasemi's tutorial on YouTube. My goal was to deep in the basics of Three.js so that I could create interactive projects.
You need Node.js installed on your computer. If you have any problem with the version, with 18 you should not have any problem.
npm install
npm run dev- Freedom of movement in a Art Gallery 3D Environment
- Wall Collision with the character
- Possibility of jumping by pressing SPACE
- Toggling between interactive and moving mode with key 'i'
- Turn on/off some ambient music
- Add pictures (png) to the world through a config file
- Add videos (mp4) to the world through a config file
- Interaction with the pictures when closeness detected
- Interaction with the pictures when clicking them (url)
- Responsiveness through a joystick created with nipple.js
- if interactive mode is enabled, character cannot move
- send a feedback to the user to tell in which mode he is (interactive or movement)
- clicking is only enabled if interactive mode is enabled
- only show cursor if interactive mode is enabled
- add video handling possibility. Play by 'default', 'click' or 'close'
- add og images for displaying cool thumbnails
- add a model that welcomes you to the gallery
- TODO: add some more pictures and replace mock text
- improve the textures of the walls, ceiling and floor
- TODO: improve responsiveness
- TODO: add postcss and bring a bit of order to the css chaos