AI Blocks › Build websites and web apps
3D web scene builder
Describe the scene or product viewer. Get working 3D page code with fast loading and a fallback.
3D web scene builder is a free AI skill for the job "Build websites and web apps". Give the instructions to an AI assistant that supports the required files and tools, then review its output.
Free · No account · CC BY 4.0 licence · Made by sickn33 · Level: advanced
Made by sickn33. See the original on GitHub; we copied it as it is, with its licence.
What it does
A product viewer, configurator or portfolio scene can run in the browser, load quickly, and fall back to a plain view on devices that cannot run it. The skill starts by choosing a tool to match your needs. Spline suits quick pieces made by designers. React Three Fiber suits React apps with complex scenes. Plain Three.js gives full control. It then sets up the scene, prepares and compresses the 3D models, adds camera controls that a first-time visitor can use, and shows a loading state. You need a basic web project to drop the result into.
You give it
- A description of the scene or product
- Your 3D model files, or a request to find a stand-in
- The framework your site uses (optional)
- Your target devices
You get
- A working 3D scene as code
- A tool recommendation with reasons
- Loading and fallback handling
- Controls tuned for first-time users
- A performance checklist
Use it when
- You want visitors to spin a product around on your site.
- You are building a 3D portfolio and do not know which library to use.
- Your 3D scene runs slowly on phones.
- You need a 3D scene that still looks fine when WebGL is off.
How to use it
- Add it to your AI once: download it and add the folder to Claude, ChatGPT or Codex as a skill.
- Ask for the job in your own words. Your AI opens the skill when it fits.
- It works best when your AI can run code and open a browser.