Indehell – 3D Profile Website

This is the 3D profile website of Indehell, featuring an interactive 3D animation built with WebGL - Three.js (Vanilla) and Tailwind CSS.

Exploration

• All 3D models and animations are created in Blender, utilizing Cloth Simulation & Armature for animation.
• The .glb files are optimized using Draco & MeshOptimizer for minimize the size.
• Through experimentation, cloth simulation data is best compressed using MeshOptimizer, while simple mesh types are better suited for Draco compression.
• Web-integrated animations are manually handled using vanilla JavaScript, employing techniques such as setTimeout, transitionend events, and other manual state management methods to control animation flow.

Decoding & Optimization

• Draco Loader dari Three.js
• MeshOptimizer dari Zeux/Meshoptimizer

Tech Stack

• Three.js
• DracoLoader
• MeshOptimizer
• Tween.js
• Tailwind CSS V4
• Vite