3D and WebGL Sections
Add 3D objects, shader backgrounds, and scroll-driven 3D scenes to your WordPress pages with UiChemy, with three.js built in and no extra setup.
A 3D section is a Composer section with a live WebGL scene inside it: a spinning object, an animated shader background, a scroll-driven scene, or your own 3D model. UiChemy ships with three.js built in, so you just describe the section and it works, with no libraries to add.
Why It Matters
- Eye-catching heroes without plugins: three.js comes with UiChemy and loads only on pages that use it, so other pages stay light.
- Safe for real pages: scenes pause when they're off screen or the tab is hidden, respect visitors who prefer reduced motion, and resize with the section.
- Tune it without code: with UiChemy Pro, values like spin speed, colour, and position show up as fields you can change in the Editor.
Use Cases
- A hero with a 3D object that slowly rotates behind your headline.
- An animated shader background for a landing page or product launch.
- A scroll-driven scene where an object turns or moves as visitors scroll.
- A product model in 3D, loaded from your own
.glbfile.
Build a 3D Section
The easiest way is to ask AI. Use AI Chat inside the Composer (Pro), or an AI client like Claude or Cursor connected over MCP (free). UiChemy gives the AI its own guide for 3D sections, so it builds them the right way.
Describe the scene
Say what you want to see and how it should move.
Example prompt: "Create a hero section with a glowing wireframe sphere behind the headline. Slowly rotate it, and spin it faster as the visitor scrolls. Add controls for spin speed and colour."
Check it on the page
The scene shows in the editor preview and on the live page. If something looks off, ask for a follow-up change, for example "make the sphere smaller" or "use our brand blue".
Fine-tune the values (Pro)
Open the Editor tab's Animation panel to adjust the values the AI exposed, like speed, colour, or bloom strength. For a 3D object, position, rotation (in degrees), and scale are grouped under Placement. See Animation: Editing GSAP Values Visually.
3D sections are built for Elementor pages, where three.js loads automatically for any section that uses it.
Use Your Own 3D Model
You can show your own model in .glb or .gltf format, up to 64 MB. Ask your connected AI client to upload it and add it to a section. UiChemy checks that the file really is a 3D model before saving it, so a renamed file is rejected.
Models are uploaded through your AI client, not the Media Library. Keep these in mind:
- Use plain
.glbfiles. Compressed models (DRACO or KTX2) aren't supported, so export without that compression. - Your model is resized for you. Models are exported at very different sizes, so UiChemy fits them to the scene and centres them first. Then adjust Placement to taste.
- A model needs light. If yours shows up black, ask the AI to add lighting.
What's Built In
Besides three.js itself, these add-ons are ready to use, with nothing to install:
| Add-on | What it's for |
|---|---|
| OrbitControls | Let visitors drag to rotate the view |
| GLTFLoader | Load .glb and .gltf models |
| EffectComposer, RenderPass, OutputPass | Post-processing effects |
| UnrealBloomPass | A soft glow around bright areas |
| AfterimagePass, FilmPass, GlitchPass, ShaderPass | Trails, film grain, glitch, and custom effects |
| FXAAShader, CopyShader | Smoother edges and simple passes |
Tips
- Keep text selectable. If your headline sits over the 3D scene, make sure the text can still be clicked and selected in the editor. Ask the AI to keep the canvas and decorative layers from blocking it.
- Treat 3D as decoration. Don't put important content only inside the scene. Keep key text in the page itself.
- One scene per section. Browsers allow only a limited number of 3D scenes per page, so use 3D where it matters most.