Artwork style pass
# Test: threejs_artwork_style_pass Build a real-time 3D scene in three.js: a **caped flying hero** flies through a row of **large framed artworks**, and eac…
More
1 test · 4 finished runs (0 agent, 4 raw one-shot) · 4 live demos
The prompt
# Test: threejs_artwork_style_pass Build a real-time 3D scene in three.js: a **caped flying hero** flies through a row of **large framed artworks**, and each time he passes through a frame **his rendering style changes to match that artwork's style**. - The hero is an original, generic caped flyer (your own design, not any existing or trademarked character): a stylised humanoid in a flying pose, fists forward, with a cape that flutters and ripples in the wind as he flies. - A row of at least **five big picture frames** stands along his flight path, spaced out, each with a gilded frame and a procedurally generated canvas in a different style, for example: **oil painting** (thick brush strokes), **ukiyo-e woodblock** (flat colours, bold outlines, wave pattern), **pixel art**, **comic book / halftone** (dots, ink outlines), **watercolour** (soft bleeding washes). More styles are welcome. - As he flies **through** each frame, the hero's look switches to that artwork's style (custom shaders / materials / post-processing, e.g. toon shading + outlines, halftone dots, pixelation, painterly noise, paper texture), ideally with a short visible transition at the moment he crosses the frame plane. Optionally the world around him can also take on the style. - Motion must be **smooth and continuous** (no teleporting or snapping): he flies along a gentle curved path through all frames, and the whole sequence loops seamlessly. - The **camera follows** him smoothly (chase camera with slight lag), keeping both the hero and the next frame in view. - Good lighting, sky/background and atmosphere; aim for a polished, showcase-quality look. Deliverable: reply with exactly one complete, self-contained `index.html` file in a single ```html code block. Requirements: - Use three.js (r160 or newer) loaded from a CDN through an `<script type="importmap">` (e.g. jsDelivr or unpkg); addons such as OrbitControls may be imported from the same CDN via the import map. - No other files: no external textures, models, fonts or images. Generate any textures procedurally in code. - It must run by simply opening index.html in a modern desktop browser, fill the window, and handle resize. - Animate with requestAnimationFrame and a clock, so it looks right at any frame rate. - No explanation is needed outside the code block.
Same prompt, all models: step through 11 runsIn the gallery: one player, arrow keys or swipe.