Crafting a Glitchy 3D World: A Case Study on Weisdevice
Creating a unique portfolio website that stands out can be a challenge, especially when merging design, technology, and a bit of chaos. This case study explores the journey behind the development of Weisdevice, a portfolio website that embodies imperfection and creativity in a 3D environment.
Concept: The Glitched Robot
At the heart of Weisdevice lies an imperfect robot navigating her experiments on a solitary island. Inspired by personal experiences of focus, resilience, and occasional bouts of confusion, the website captures the essence of creativity through a blend of design and technology.
Prototypes: The Early Stages
Two initial prototypes were built using a no-code tool to manage interactions and design features. Despite exploring real-time geometry and complex systems, they were ultimately replaced by a complete redesign in Three.js, which greatly improved both aesthetics and performance.
Building the Experience
After gathering audio and 3D model assets, the website’s 3D world was designed in Blender and fully implemented within two weeks. The long-term development focused on refining design elements and enhancing functionality to create a seamless user experience.
Tech Stack
The project utilized the following technologies:
- HTML
- CSS
- Vanilla JavaScript
- Three.js
- GSAP
- GLSL
- Howler.js
Simulating Real-Time Light
The project’s lighting is entirely simulated, featuring baked textures from Blender to create a visually stunning environment without real-time lighting. This method enhances the overall aesthetic while maintaining simplicity and performance.
Adaptive Scenes for Thematic Changes
Dynamic updates occur in the Three.js environment when users switch themes. Changes include:
- Grid color adjustments
- Smoke color alterations
- Scene background color modifications
Glitch-Cartoon Method: CSS & 3D Design
Multiple CSS techniques were explored to achieve a cohesive “wobble” effect across the interface. This technique, combined with optimized 3D models and textures, adds a cartoonish yet glitchy vibe to the overall design.
GSAP Animations and Audio Interactions
Animations implemented with GSAP include:
- DOM interactions and visuals
- Intro animations to guide users
- Audio interactions with the Gameboy and DJ-Device using Howler.js, creating an immersive audio-visual experience.
Performance Optimization
The website is designed to be performant across devices, utilizing lazy loading, minimal file sizes, and optimized interactions to ensure a smooth user experience. Features like raycasting and adjustable rendering help enhance interactivity without compromising performance.
Conclusion
The development of Weisdevice was a rewarding journey that combined creativity with technical challenges. From initial prototypes to a fully realized 3D environment, every aspect reflects the intersection of design and technology. You can explore the Weisdevice project code on GitHub.
Related Keywords
- 3D web design
- Interactive portfolio
- Three.js projects
- Glitch art
- Creative coding
- Performance optimization
- UI/UX design
