For my individual website proposal, I wanted to explore a JavaScript library I haven’t had much experience with—Three.js. This library enables the use of 3D models and the creation of interactive 3D web experiences, which has always been an area of great interest to me. As I considered what kind of concept would best lend itself to 3D interaction, I was drawn to the idea of Performance Art. Inspired by my partner, I envisioned an artist’s performance portfolio that allows users to navigate a virtual stage, interacting with landmark objects to explore different aspects of the artist’s work. This approach offers a fresh, immersive way to showcase artistic performances, moving beyond traditional portfolio layouts. Although Three.js is a powerful tool for 3D rendering, constructing a virtual stage requires a solid understanding of 3D modeling. Fortunately, recent tools like Spline streamline asset creation and scene construction, particularly with their new AI generation capabilities. By combining Spline for modeling and Three.js for interactivity, I believe I can create a unique and engaging performance experience that enhances how artists present their work online.
The goal of this website is to provide an immersive and engaging portfolio for a New York City-based performer, offering a unique way for visitors to explore their work, performances, and coaching services. By utilizing Three.js, the site will create a 3D theatrical stage environment where users can navigate an interactive character to discover different aspects of the artist’s career. This approach enhances engagement and reflects the artist’s creative identity.
The website will contain the following key sections, each appearing as a popup when the interactive character reaches a specific landmark in the 3D scene:
There are a few levels of graphics to mention in this project, the main being the 3D assets to construct the web page, but also the media assets like performance videos and artist images to populate the performances and contact sections.
The concept is a theater stage viewed from the audience’s perspective, creating an interactive and immersive experience. Imagine stepping through the grand entrance of a theater into a dimly lit auditorium, where the glow of the stage draws you in. You begin at the back of the theater, behind rows of seats filled with silhouettes of an engaged audience, their heads joyfully bobbing to the rhythm of the music. As you make your way down the side aisle, the atmosphere builds—the soft murmur of the crowd, the warmth of the stage lights ahead. Upon reaching the stage, you notice three key landmarks: A piano, representing the About section. Touching it reveals a UI popup displaying the artist’s biography, including their background and experience. A microphone on a stand with a performing avatar, leading to the Performances section. Interacting with it brings up a carousel of video previews, showcasing past performances with embedded links. A music stand, signifying Coaching & Scheduling. Activating this displays quick links for coaching details and a direct Calendly integration for booking a session. Each element serves as a gateway to the artist’s story, seamlessly blending 3D exploration with intuitive UI interactions to create a dynamic and engaging portfolio experience.
Forest Trail: A Three.js app with an interactive home page and different sections marked by landmarks (portals)
I want to create an indoor, navigable theater scene, where the character can walk up on stage and interact with objects to get more information.