trustinyoon / vibe-3d.space

vibe-3d.space

---

1. Background and Overview

vibe-3d.space is born out of my daily necessity for ultimate vibes. Whether it be coding at a cafe, building product at a jazz-themed WeWork, or getting some late night work done with lo-fi girl studying on my other monitor, I require immaculate vibes to get into my flow state. Therefore, I wanted to create a website that immerses the user into a 3D atmosphere where they can listen to a curated embedded playlist as well as turn on ambient background noises as if they are at a NYC rooftop jazz cafe, highly influenced by http://imissmybar.com/ but taking it a step further with the interactive 3D experience. The user can look around using arrow keys or the mouse all within the browser.

I hope that vibe-3d.space can serve as a nice companion to vibe with wherever you are.

2. Functionality and MVP

The functionality for the first MVP will be simple in that the user will immediately be immersed into the 3D environment upon visiting the site. The user can use arrow keys or the cursor to look around the environment which will be set at a NYC jazz cafe (will later add other atmospheres like Tokyo, LA, etc.). There will also be floating sliders that can control how much ambient noises the user wants (ex. people talking in the background, street sounds, etc.). Curated Spotify playlists will be embedded on the screen to change playlists at anytime.

3. Wireframes and File Structure

Wireframe

See static->wireframe.png

File Structure

vibe-3d.space

• threejs-webpack -- src --- index.html --- script.js --- style.css

4. Architecture and Technology

Stack:

• Vanilla JS
• three.js
• HTML, CSS
• Spotify API

5. Implementation Timeline

• 7/10/21: Finish proposal and wireframing. Consume crash course on three.js and initial setup of project files.
• 7/11/21: Finish skeleton of website (have 3D environment setup and ready to populate with 3D objects over the next few days. Incorporate Spotify API and add ambient noise sliders)
• 7/12/21: Populate environment with buildings, surrounding objects, and make sure rendering performance is good.
• 7/13/21: Finish up 3D objects and polish them.
• 7/14/21: Add any touchups and finalizations.
• 7/15/21: Finalize details and deploy onto domain url.

6. (Bonus Features)

Other locations/vibes will be added such as Seoul, Tokyo, LA.

Three.js Starter

Courtesy of Bruno Simon of https://threejs-journey.xyz/