In this case study, I will walk you through the process of creating my portfolio website — from early prototypes and technical experiments to the final glitched-out 3D world that became Weisdevice. What began as a small personal exploration of form, sound, and motion gradually evolved into a reflection of my creative process: a user-friendly website that doesn’t confuse visitors, yet embraces an imperfect, sometimes chaotic style, deeply focused on the intersection of design, technology, and emotion.

Concept

The 3D world centers on an imperfect old robot. She’s not very advanced and occasionally malfunctions, but keeps focusing on her experiments on her lonely island. The project was inspired by my own experiences — long periods spent focusing on what I love, minimal interaction with other humans, and lots of trial and error. Under the technical-style design, there’s a subtle feeling of melancholy and confusion, but it’s also about focus, resilience, and a little chaos.

Two Abandoned Prototypes

Two prototypes were built with a no-code-based tool, embedded in a canvas, and managed interactions between the embedded patch and the site’s interface through external JavaScript functions. They explored real-time geometry, particle systems, custom shaders, and complex node networks, but the design and performance fell short. The experiments were set aside in favor of Three.js, where the project was completely redesigned and rebuilt with new models.

Building the Experience

After collecting audios and various 3D model assets, the 3D world was designed in Blender and implemented on the web for this portfolio website in just two weeks. After that, the process became long-term: refining the design, adding functionality, and improving the code.

Tech Stack:

• HTML
• CSS
• Vanilla JavaScript
• Three.js
• GSAP
• GLSL
• Howler.js

Simulating Real-Time Light with Textures and Materials

There is no real-time lighting in this project, all lighting is simulated.

• In addition to Blender lighting setups used to bake textures for both dark and light modes, manual painting was applied on the baked textures to enhance the visual effects.
• All objects use THREE.MeshBasicMaterial. The gamebody object, however, uses THREE.MeshStandardMaterial, combining the skybox texture as an envMap with its base color texture to create a metallic, reflective effect that emphasizes it as the main character.
• The smokeMaterial changes the smoke (caused by overheating of the gameboy object)from white to red when switching from light mode to dark mode, simulating the effect of the red streetlight.
• The clouds use THREE.MeshBasicMaterial with an opacity: 0.7, Their baked texture was manually modified — if you look closely, you’ll notice the cloud shadows aren’t quite logical.

Adaptive Scene Updates for Theme Changes

When the theme switches, the CSS applies a different color root, and several updates occur in the Three.js scene:

• The grid color changes between medium gray and dark gray.
• The smoke color switches between white and red.
• A series of baked textures are updated.
• The scene background color is changed.

Glitch-Cartoon Method in 2D (CSS)

Various CSS techniques were tested to simulate post-processing effects during the two prototypes but were eventually abandoned. Unexpectedly, the “wobble” effect was later optimized and applied to elements like modals and toggle buttons, giving the 2D interface a cohesive, glitchy aesthetic that complements the 3D world.

.modal, #music-toggle, #theme-toggle, #camera-toggle {
  filter: url(#wobble);
}

See the Pen
Wobble by wehwayne2 (@wehwayne2)
on CodePen.

Glitch-Cartoon Methods in 3D

To achieve minimal loading time, the model was optimized to just 0.76 MB, and all textures were deliberately small, with some creative twists intentionally presented as glitchy visual elements.

The cartoonish, retro, and slightly derelict 3D world was designed, baked, and hand-painted in Blender, then heavily compressed for a worn, imperfect look. Two sets of three baked textures—for light and dark modes—total just 3 MB.

Glitch-Cartoon Methods on the old Monitor

There are five textures for the monitor — four static images and one 15-second video texture — with a total size of just 1.4 MB.

The static image textures were created in three steps:

• Created in Photoshop.
• Baked with lighting in Blender.
• Combined with a chromatic aberration shader and blended during each switch.

The monitor’s functionality was intentionally programmed to be slightly unstable — clicks may not always respond properly, reflecting the theme of malfunction.

The video texture is a short compilation of my own projects. It is ultra-low resolution and pre-made to be audio-reactive in TouchDesigner. The video’s aspect ratio is intentionally mismatched with the mesh, creating glitchy edges on the left and right. Horizontal glitches enhance the monitor’s retro, worn-out appearance.

GSAP Animations

Many animations were implemented with GSAP — none were exported from Blender. These include:

• DOM animations
• Three intro animations (one on page enter, two triggered by camera switches) to guide users and highlight interactive objects
• In const render = () => {} : Monitor slow rotation and random clouds movement
• 3D Hover and Click Interactions

Audio Interactions

Sound effects were added to the UI, the Gameboy, and the DJ-Device using Howler.js to create an audio-interactive experience. The DJ-Device doesn’t play the usual clean DJ samples — instead, it delivers a slightly chaotic soundscape that matches the project’s offbeat vibe.

Performance Optimization & Responsive Design

The goal of the project is to create a performant 3D world that works on most devices. In addition to minimal file sizes, lazy loading, and responsive CSS,

• cancelAnimationFrame(renderReq) is used to pause rendering when the user opens a project page in the Work section (after clicking “More”).

• Raycasting checks for object interactions at 30 FPS instead of every frame

Some Thoughts

I’m truly grateful to Codrops for the opportunity to write this case study — I approached it from a design and technical art perspective. This website was deeply influenced by my background in creative coding and generative art.

Design

I usually start with unformed ideas and shape the design as I go — much like generative art, where even “bugs” can become features.

Development

This was definitely a challenge for me — my first Three.js website!

Using AI saved time for finding resources or needed parts in documentation without knowing the exact words. But I spent a lot of time untangling hidden issues in my spaghetti-like main.js, painfully jumping between lines like an ant. It was an important lesson in learning to write clean, maintainable code.

You can find the code on GitHub.

Credits

This website is the final project of my Master’s program in Design, thanks to Prof. Frank Jacob (design feedback). Thanks to Andrew Woan (YouTube tutorial & feedback), developer Vladimir Nariadov (perfomance feedback); 3D assets by: FuneralClown, Vanya Dzhus, Eh, Yana Melnyk; music by XtremeFreddy and frankum; sound effects from Freesound.org. Special thanks to Reddit users in the Three.js and Web Dev communities for their valuable feedback, which helped improve UX design and testing.