On this case examine, I’ll stroll you thru the method of making my portfolio web site — from early prototypes and technical experiments to the ultimate glitched-out 3D world that turned Weisdevice. What started as a small private exploration of kind, sound, and movement progressively advanced into a mirrored image of my inventive course of: a user-friendly web site that doesn’t confuse guests, but embraces an imperfect, typically chaotic type, deeply targeted on the intersection of design, know-how, and emotion.
Idea
The 3D world facilities on an imperfect outdated robotic. She’s not very superior and sometimes malfunctions, however retains specializing in her experiments on her lonely island. The venture was impressed by my very own experiences — lengthy intervals spent specializing in what I really like, minimal interplay with different people, and many trial and error. Below the technical-style design, there’s a delicate feeling of melancholy and confusion, however it’s additionally about focus, resilience, and just a little chaos.
Two Deserted Prototypes
Two prototypes had been constructed with a no-code-based software, embedded in a canvas, and managed interactions between the embedded patch and the positioning’s interface via exterior JavaScript features. They explored real-time geometry, particle techniques, customized shaders, and sophisticated node networks, however the design and efficiency fell brief. The experiments had been put aside in favor of Three.js, the place the venture was fully redesigned and rebuilt with new fashions.
Constructing the Expertise
After gathering audios and varied 3D mannequin property, the 3D world was designed in Blender and applied on the internet for this portfolio web site in simply two weeks. After that, the method turned long-term: refining the design, including performance, and bettering the code.
Tech Stack:
- HTML
- CSS
- Vanilla JavaScript
- Three.js
- GSAP
- GLSL
- Howler.js
Simulating Actual-Time Gentle with Textures and Supplies
There isn’t any real-time lighting on this venture, all lighting is simulated.
- Along with Blender lighting setups used to bake textures for each darkish and lightweight modes, guide portray was utilized on the baked textures to reinforce the visible results.
- All objects use
THREE.MeshBasicMaterial. The gamebody object, nevertheless, makes use ofTHREE.MeshStandardMaterial, combining the skybox texture as anenvMapwith its base coloration texture to create a metallic, reflective impact that emphasizes it as the principle character. - The
smokeMaterialmodifications the smoke (brought on by overheating of the gameboy object)from white to purple when switching from gentle mode to darkish mode, simulating the impact of the purple streetlight. - The clouds use
THREE.MeshBasicMaterialwith anopacity: 0.7, Their baked texture was manually modified — in the event you look carefully, you’ll discover the cloud shadows aren’t fairly logical.
Adaptive Scene Updates for Theme Modifications
When the theme switches, the CSS applies a distinct coloration root, and several other updates happen within the Three.js scene:
- The grid coloration modifications between medium grey and darkish grey.
- The smoke coloration switches between white and purple.
- A sequence of baked textures are up to date.
- The scene background coloration is modified.
Glitch-Cartoon Technique in 2D (CSS)
Numerous CSS methods had been examined to simulate post-processing results in the course of the two prototypes however had been finally deserted. Unexpectedly, the “wobble” impact was later optimized and utilized to parts like modals and toggle buttons, giving the 2D interface a cohesive, glitchy aesthetic that enhances the 3D world.
.modal, #music-toggle, #theme-toggle, #camera-toggle {
filter: url(#wobble);
}
See the Pen
Wobble by wehwayne2 (@wehwayne2)
on CodePen.
Glitch-Cartoon Strategies in 3D
To attain minimal loading time, the mannequin was optimized to only 0.76 MB, and all textures had been intentionally small, with some inventive twists deliberately offered as glitchy visible parts.
The cartoonish, retro, and barely derelict 3D world was designed, baked, and painted by hand in Blender, then closely compressed for a worn, imperfect look. Two units of three baked textures—for gentle and darkish modes—complete simply 3 MB.
Glitch-Cartoon Strategies on the outdated Monitor
There are 5 textures for the monitor — 4 static pictures and one 15-second video texture — with a complete dimension of simply 1.4 MB.
The static picture textures had been created in three steps:
- Created in Photoshop.
- Baked with lighting in Blender.
- Mixed with a chromatic aberration shader and blended throughout every change.
The monitor’s performance was deliberately programmed to be barely unstable — clicks could not at all times reply correctly, reflecting the theme of malfunction.
The video texture is a brief compilation of my very own initiatives. It’s ultra-low decision and pre-made to be audio-reactive in TouchDesigner. The video’s side ratio is deliberately mismatched with the mesh, creating glitchy edges on the left and proper. Horizontal glitches improve the monitor’s retro, worn-out look.
GSAP Animations
Many animations had been applied with GSAP — none had been exported from Blender. These embody:
- DOM animations
- Three intro animations (one on web page enter, two triggered by digicam switches) to information customers and spotlight interactive objects
- In
const render = () => {}: Monitor gradual rotation and random clouds motion - 3D Hover and Click on Interactions
Audio Interactions
Sound results had been added to the UI, the Gameboy, and the DJ-Gadget utilizing Howler.js to create an audio-interactive expertise. The DJ-Gadget doesn’t play the standard clear DJ samples — as an alternative, it delivers a barely chaotic soundscape that matches the venture’s offbeat vibe.
Efficiency Optimization & Responsive Design
The aim of the venture is to create a performant 3D world that works on most gadgets. Along with minimal file sizes, lazy loading, and responsive CSS,
-
cancelAnimationFrame(renderReq)is used to pause rendering when the consumer opens a venture web page within the Work part (after clicking “Extra”).
- Raycasting checks for object interactions at 30 FPS as an alternative of each body
Some Ideas
I’m actually grateful to Codrops for the chance to write down this case examine — I approached it from a design and technical artwork perspective. This web site was deeply influenced by my background in inventive coding and generative artwork.
Design
I normally begin with unformed concepts and form the design as I am going — very similar to generative artwork, the place even “bugs” can turn out to be options.
Growth
This was positively a problem for me — my first Three.js web site!
Utilizing AI saved time for locating assets or wanted elements in documentation with out understanding the precise phrases. However I spent quite a lot of time untangling hidden points in my spaghetti-like essential.js, painfully leaping between strains like an ant. It was an essential lesson in studying to write down clear, maintainable code.
You’ll find the code on GitHub.
Credit
This web site is the ultimate venture of my Grasp’s program in Design, because of Prof. Frank Jacob (design suggestions). Because of Andrew Woan (YouTube tutorial & suggestions), developer Vladimir Nariadov (perfomance suggestions); 3D property by: FuneralClown, Vanya Dzhus, Eh, Yana Melnyk; music by XtremeFreddy and frankum; sound results from Freesound.org. Particular because of Reddit customers within the Three.js and Internet Dev communities for his or her priceless suggestions, which helped enhance UX design and testing.
