Three.js Interactive 3D Website
Budget: $250 – $750 USD
I’m building a brand-new, browser-based experience that relies on Three.js and raw WebGL calls to present an interactive 3D model viewer, complete with smooth animations and rich user interactions. The goal is a lightweight site that loads quickly, runs fluidly on desktop and mobile, and lets visitors explore a complex GLTF/GLB model: rotate, zoom, trigger animation sequences, and react to clicks or hovers that reveal additional content.
Here’s what I need delivered:
• A clean, modular Three.js codebase (ES6 modules or TypeScript) that boots a canvas, loads the model, and wires OrbitControls (or a comparable custom control) for intuitive navigation.
• At least one timeline-based animation (GSAP, native keyframes, or a Three.js animation mixer) that can be started, paused, or scrubbed by the user.
• Event handling that surfaces data from the 3D scene back to regular HTML/UI elements so I can hook in marketing copy or links.
• Responsive layout and performance optimisations such as texture compression, efficient shader use, frustum culling, and lazy loading.
• Clear build/run instructions plus any asset-processing scripts so I can reproduce the build locally.
Acceptance criteria
1. The model loads in under five seconds on a standard 4G connection.
2. Camera orbit, pan, and zoom stay above 45 fps on modern mobile.
3. Clicking a designated hotspot fires a JavaScript callback with the part’s ID.
4. Animations play without mesh clipping or texture artefacts.
If you have previous Three.js showcases, especially interactive product viewers or landing pages, feel free to point me to them when you respond.
Here’s what I need delivered:
• A clean, modular Three.js codebase (ES6 modules or TypeScript) that boots a canvas, loads the model, and wires OrbitControls (or a comparable custom control) for intuitive navigation.
• At least one timeline-based animation (GSAP, native keyframes, or a Three.js animation mixer) that can be started, paused, or scrubbed by the user.
• Event handling that surfaces data from the 3D scene back to regular HTML/UI elements so I can hook in marketing copy or links.
• Responsive layout and performance optimisations such as texture compression, efficient shader use, frustum culling, and lazy loading.
• Clear build/run instructions plus any asset-processing scripts so I can reproduce the build locally.
Acceptance criteria
1. The model loads in under five seconds on a standard 4G connection.
2. Camera orbit, pan, and zoom stay above 45 fps on modern mobile.
3. Clicking a designated hotspot fires a JavaScript callback with the part’s ID.
4. Animations play without mesh clipping or texture artefacts.
If you have previous Three.js showcases, especially interactive product viewers or landing pages, feel free to point me to them when you respond.
Related categories:
JavaScript
CSS
Animation
User Interface / IA
Software Architecture
HTML5
3D Modelling
Express JS
Three.js
Tailwind CSS