Task: AWP | Dragon Lore — Assembly / Disassembly Simulator (three.js + WebGL)
Build a single-file web app that renders a stylized 3D model of the AWP | Dragon Lore sniper rifle from Counter-Strike and animates a full disassembly → exploded view → reassembly with one button.
Work autonomously and don't ask clarifying questions. Start writing code right away. Keep upfront planning short and don't try to design everything in your head first. Aim for "polished and working", not "perfect".
Hard constraints
One file: index.html, with all HTML, CSS and JS inline. It must work by double-clicking it in Chrome.
three.js is loaded via an import map from a CDN with a pinned version (e.g. three@0.160.0, plus three/addons/ from the same version). No other libraries.
No external assets. All geometry is procedural (primitives, ExtrudeGeometry, LatheGeometry, Shape with holes). All textures are procedural (CanvasTexture).
Minimal UI. This is critical. The output will be screen-recorded and placed side by side with two other versions in square (~1:1) panels.The only visible element is one small, semi-transparent button, bottom-center. Its label toggles between DISASSEMBLE and ASSEMBLE.
Spacebar triggers the same action.
Nothing else is on screen: no titles, logos, FPS counters, debug panels or labels.
Input is ignored while an animation is running.
Framing: the canvas fills the window. The camera auto-fits the rifle's bounding box so both the assembled and the exploded states fit with some margin, mainly in a square window, though wide and tall windows should also look fine. Handle resize and cap devicePixelRatio at 2.
Deterministic timing, so three recordings stay in sync:Disassembly takes exactly 6.0 s.
Assembly takes exactly 6.0 s, as the reverse of disassembly.
Timing is time-based (THREE.Clock / https://t.co/vY52eFdGQQ()), not frame-based.
The page starts with the rifle fully assembled.
Smooth 60 fps and no console errors.
Visual reference: Dragon Lore
The base model is the AWP, an AWM-style bolt-action sniper rifle. Long silhouette, thumbhole stock, long barrel, big scope.
Stock / chassis: pale cream-gold, parchment-like base, with brown/sepia Celtic knotwork engravings forming a coiled dragon. The thumbhole is a real hole through the geometry.
Receiver side (above the magazine): a vivid red-orange fire dragon on a hot orange/yellow gradient. This is the signature element of the skin.
Butt pad / rear of the stock: green and black diamond checker pattern.
Barrel: long, dark gunmetal, with an orange-gold and dark harlequin diamond pattern along most of its length.
Muzzle brake: black, chunky, with side ports.
Scope: large tube with a green/olive and black checkered pattern and gold accent rings. Black turrets, mounted in black rings on a rail.
Bipod: black/olive, folded forward under the fore-end.
Other parts: black bolt with a round knob, black box magazine, black trigger and trigger guard, small gold accents.
Use MeshStandardMaterial / MeshPhysicalMaterial. Metal parts are more metallic and glossier than the painted stock. Use RoomEnvironment + PMREMGenerator for reflections.
Parts
Each part is a separate group with a sensible pivot, so it can be animated independently:
Stock / chassis (with thumbhole)
Butt pad + cheek riser
Receiver / action
Bolt (body + handle + knob)
Magazine
Trigger group + trigger guard
Barrel
Muzzle brake
Scope tube (with lenses)
Scope turrets
Scope rings / mount + rail
Bipod
Disassembly choreography (≈6.0 s, staggered, eased, slightly overlapping)
Magazine drops straight down.
Bolt handle rotates up (~90°), the bolt slides back, then it floats out to the rear.
Scope lifts straight up off the rings, then moves up and back. The rings and rail follow separately.
Bipod legs unfold slightly, then the bipod detaches downward.
Muzzle brake unscrews: it rotates around the barrel axis (≥2 turns) while moving forward.
Barrel slides forward out of the receiver.
Receiver lifts up out of the stock.
Trigger group drops down. Butt pad / cheek riser move back.
Final state: a clean exploded layout along the rifle's axis, like a technical diagram. No overlaps, and everything stays in frame.
Assembly is the reverse. Every part returns to its original transform.
Camera: a well-composed 3/4 side view with a very slow, subtle drift. It may smoothly zoom out for the exploded view. Mouse orbit via OrbitControls is OK, but there are no visible controls.
Scene: dark neutral studio background, soft key light + rim light, and a soft shadow under the rifle.
Before you finish (quick review of the actual code)
[ ] Do the 6 s timings hold in both directions, and does everything return to its start pose?
[ ] Does the muzzle brake spin around the barrel axis? Does the bolt rotate before it slides?
[ ] Do the assembled and exploded states fit in a square window?
[ ] Is only the button visible, with no console errors and no leftover debug helpers?
Deliverable
The complete index.html.
A short report (5–10 lines):…
