BigPengu's Little World

Step into my interactive 3D room, where everyday objects unlock projects, memories, music, and the stories behind who I am.

Comment

Inspiration

Personal websites often compress a person into a sequence of headings, cards, and project links. I wanted to explore a more spatial and emotional form of self-introduction: a place visitors could enter, observe, and explore at their own pace.

BigPengu's Little World is inspired by the idea that everyday objects can preserve pieces of a person. A bookshelf can reveal what shaped their thinking. A bicycle can hold memories of movement and travel. A camera can become an archive of places and people. A record player can communicate a mood before a single sentence is read.

I am an education student with no traditional background in software engineering or 3D web development. This project also became a personal experiment in AI-assisted creation: could I turn a detailed visual idea into a complete, interactive web experience by working closely with GPT-5.6 and Codex?

What it does

BigPengu's Little World is an interactive 3D personal website presented as a virtual room.

Visitors can drag to look around, scroll to zoom, and move their cursor across the room to discover interactive objects. Each object acts as an entrance to a different part of my life:

  • Bookshelf: opens a personal reading archive containing 18 books, summaries, and external references.
  • Movement corner: presents photo collections from cycling, skateboarding, and fitness.
  • Record player: opens an album library with track information, playback controls, volume control, and available music previews.
  • Camera: displays photographs as a horizontally scrollable collection of film rolls from different places.
  • Computer: moves the camera toward the monitor and activates a working terminal where visitors can enter commands such as help, about, interests, and socials.
  • Whiteboard and signs: introduce the room or connect visitors to selected external pages.

The room turns personal information into a collection of objects, movements, sounds, and visual archives. Visitors construct their own route through the experience instead of following one fixed sequence.

How I built it

The project was built with:

  • React and TypeScript for application structure and interface logic
  • Three.js and React Three Fiber for the WebGL scene
  • React Three Drei for model loading, camera controls, and asset progress
  • GSAP for camera movement, object animation, and overlay transitions
  • Vite for local development and production builds
  • Blender and baked textures for the room model and visual atmosphere

The 3D room is loaded as a GLB scene with baked texture maps. Interactive objects are mapped to named meshes in the model. At runtime, the application creates pivots and invisible hitboxes around selected objects, allowing each item to animate independently without rebuilding the original model.

Hovering over an object can lift, tilt, or scale it. Clicking an interactive area starts a GSAP camera sequence that moves the visitor toward the selected object. Depending on the interaction, the application then opens an archive panel, activates the terminal screen, or redirects to an external page.

The computer terminal is rendered dynamically with a Canvas texture and placed directly over the 3D monitor. Keyboard input updates the canvas in real time, making the terminal part of the physical room instead of a separate HTML window.

I also added several performance and accessibility measures:

  • demand-based rendering to avoid drawing unnecessary frames
  • lazy loading for the larger archive interface
  • texture and GPU prewarming before the room becomes available
  • image lazy loading and asset preloading where appropriate
  • an error boundary for WebGL loading failures
  • reduced-motion support
  • keyboard navigation, focus management, and Escape-to-close behavior

How I used GPT-5.6 and Codex

I used GPT-5.6 during the planning and design process. It helped me clarify the creative direction, divide the room into meaningful content areas, organize the information architecture, refine interaction ideas, write and edit interface copy, and translate visual intentions into concrete technical requirements.

I used Codex throughout the development process. Codex helped build and iterate on the React and Three.js architecture, connect the GLB model to runtime interactions, implement hover states and raycasting hitboxes, create camera transitions, build the archive interfaces, develop the interactive terminal, debug browser and WebGL issues, optimize loading performance, and prepare the project for deployment.

The workflow was highly iterative. I described the desired experience, reviewed the implementation in the browser, identified visual or interaction problems, and returned to Codex with precise feedback. This allowed me to treat development as a continuous conversation between design intention, working code, and real-time testing.

Challenges I faced

Connecting a static 3D model to web interactions

The room arrived as a visually complete scene, while the website needed individual objects to respond independently. Some objects were grouped inside baked meshes, and their local coordinate systems were not designed for animation. I had to identify the correct nodes, create runtime pivots, calculate bounds, and add custom hitboxes for objects whose visible geometry was difficult to select.

Making camera movement feel natural

Every interactive area required a different camera position and target. Sudden jumps broke the feeling of entering a physical space, while unrestricted controls could conflict with scripted transitions. I created staged GSAP camera sequences, temporarily disabled user controls during movement, saved the previous camera pose, and restored it when visitors returned to the room.

Balancing visual quality and loading speed

The room contains a 3D model, baked textures, photographs, book covers, music metadata, and multiple interface systems. Loading everything immediately caused delays and visible compilation pauses. I introduced lazy loading, demand rendering, GPU prewarming, compressed web assets, and a loading gate that only opens once both the assets and scene are prepared.

Designing several experiences inside one room

The reading archive, movement gallery, music library, photography film strip, and terminal each needed their own visual language while still feeling connected to the same project. I used consistent typography, animation timing, spacing, and transition behavior to make the interfaces feel like different drawers inside one personal archive.

Accomplishments I am proud of

I am proud that the final project works as a coherent interactive experience rather than a static 3D showcase. The room contains multiple functional systems, including animated object interactions, cinematic camera movement, a working terminal, multimedia archives, music playback, external links, loading management, and accessible keyboard behavior.

I am also proud of completing the project as a solo creator from a non-technical academic background. Codex gave me the ability to work directly with a modern 3D web stack while still making detailed decisions about design, storytelling, interaction, and product quality.

What I learned

I learned that building an immersive website requires close coordination between 3D assets, browser performance, interface design, animation, and user expectations. A visually attractive model only becomes an experience when every hover state, camera position, loading transition, and close button behaves predictably.

I also learned how to communicate more effectively with an AI coding agent. Broad requests produced broad results. Clear descriptions of states, constraints, edge cases, and expected behavior allowed Codex to generate stronger implementations and made each iteration faster.

Most importantly, I learned that technical tools can expand who gets to build. My background shaped the content and story of the room, while GPT-5.6 and Codex helped me turn that perspective into a working digital space.

What's next

I plan to continue expanding the room with additional project archives, more responsive layouts for smaller devices, deeper sound design, multilingual content, and improved performance on lower-powered hardware.

I also want to develop the project into a reusable framework that allows other students and creators to build personal 3D spaces from their own objects, memories, and media.

Built With

Share this project:

Updates