Epic 3d demo
The first real 3D model element for YOOtheme Pro
Upload a .glb file, drop the element on your page, done. Visitors spin the model with their mouse, zoom into the details, and on a phone they can drop it into their own living room with AR. It runs on your own site, no Sketchfab embed needed.
3D Model
3D Model
One model, shown properly
Set the starting angle so the front faces the camera. Give it a soft studio shadow, a coloured light, a slow turn. Or pick a look preset (Product Studio, Hero Showcase, Technical Viewer) and skip the fiddling entirely.
A loader that fits your brand
Pick a loader: progress bar, spinner, pulse, dots, or your own Lottie animation. Set the size and colour to match your site.
Refresh the page so you can see the loader again.
3D Model
A slideshow of 3D models
Line up as many models as you want and let people click through them like a photo gallery. Behind the scenes one viewer does all the work, so the page stays light even with 10 models loaded. Arrows, dots, thumbnails, autoplay, your call.
3D Model
Light it your way
Tune the exposure, soften the shadows, tint the whole scene with a colour. The controls sit right next to the model, so you see every change as you make it.
3D Model
View it in your room
On a phone, one tap opens the model in AR so people can place it on their real desk or floor at true size. Add a custom loading animation while big files download, and it quietly respects reduced-motion for anyone who needs the page to hold still.
A grid of models, click to explore
Show a wall of product cards. Click one and the model opens big in a pop-up where people turn it around and zoom in. Haven't made a poster image for a card? The plugin snapshots the model itself and fills it in for you.
PLG_SYSTEM_YC_EPIC3D
What's new
3.0.5 (2026-10-02)
3.0.4 (2026-09-30)
3.0.3 (2026-09-30)
3.0.2 (2026-08-12)
3.0.1 (2026-08-10)
Plugin settings
License
License Key
The key from your YOOzeCase order confirmation. Paste it here and press Activate, which ties the key to this site. Leave it empty if you have no subscription: Epic 3D keeps working without a key, because updates are not restricted yet, so a key is a registration and not a lock. One key covers 999 sites. Press Deactivate before you move it to another site.
Status
Shows the last answer from the licence server and lets you activate this site or release it again. Answers are cached for 24 hours, so these buttons are the only way to force a fresh check. When the server cannot be reached the status stays as it is for another seven days instead of switching itself off.
Epic 3D: Model
Model
Model URL (.glb / .gltf)
Direct URL to a .glb or .gltf file. Upload via the Joomla media manager and link it here.
Poster Image
Optional. Image displayed while the model loads.
Alt Text
This setting has no help text in the plugin.
Look Preset
Curated bundles of rotation, animation, camera and lighting settings. Product Studio: slow turn, soft studio shadow, zoom off - clean e-commerce look. Hero Showcase: gentle float and slow counter-turn for landing pages. Technical Viewer: no motion, full camera freedom for inspection. Minimal: static, rotate-only, shadowless. NOTE: any preset other than Custom overrides the Rotation and Animation settings and the camera/lighting settings; switch back to Custom to control those manually. Model, layout (Style tab) and Loader are never overridden.
Model Loading
Lazy (recommended): the 3D file only downloads when the element scrolls near the viewport - keeps initial page load fast when the model sits below the fold. Eager: start downloading immediately - use for above-the-fold hero elements so the model is ready the moment it is seen.
Motion
Auto-Rotate
This setting has no help text in the plugin.
Direction
This setting has no help text in the plugin.
Rotation Speed (deg / sec)
Higher = faster spin. 30 is a relaxed pace.
Auto-Rotate Delay (ms)
How long after user stops interacting before rotation resumes.
Wrapper Animation
CSS animation applied to the whole 3D viewer container.
Animation Speed
This setting has no help text in the plugin.
Animation Intensity
This setting has no help text in the plugin.
Glow Color
Colour of the glow halo around the model. Default is a soft blue.
Glow Size
Multiplier on the glow blur radius. 1 = default, 2 = twice as big, 0.5 = half as big. Combine with Animation Intensity (Subtle/Medium/Strong) for full control.
Rotate Y (turn left/right)
Permanently rotates the model around its vertical axis. Use this to correct models that were exported facing the wrong direction. -180 deg to +180 deg. Most common fix: try 90, -90, or 180.
Rotate X (tilt up/down)
Permanently tilts the model forward or backward. Useful for models exported lying on their side. -90 deg to +90 deg.
Advanced orientation (roll pitch yaw)
Optional. Direct orientation string in model-viewer format: "<roll> <pitch> <yaw>" with deg or rad units. Example: "0deg 90deg 0deg". When set, overrides the sliders above. Leave empty to use the sliders.
Camera & Lighting
Camera Controls
Allow the visitor to drag and zoom the model.
Interaction Prompt
Subtle hint that the model can be rotated by the user.
Allow Zoom
Mouse-wheel and pinch-to-zoom interaction.
Allow Pan
Right-click drag (or two-finger drag) to pan the model.
Allow Rotate
Click-and-drag to rotate. Note: turning this off snaps the camera to a front-facing view (theta 0deg, phi 75deg) and conflicts with Auto-Rotate (which animates the orbit). Disable Auto-Rotate too if you want a fully locked view.
AR Button (mobile)
Show "View in your space" button on supported mobile devices.
Pause animation when interacting
When on, the wrapper animation freezes the moment the user clicks or touches the model, so they can rotate/pan/zoom without the wrapper moving. Only meaningful when a Wrapper Animation is selected.
Resume after (seconds)
How long to wait after the user stops interacting before resuming the wrapper animation. Range 0-60. Set to 0 to never auto-resume (animation stays paused until the page is reloaded).
Shadow Intensity
This setting has no help text in the plugin.
Shadow Softness
This setting has no help text in the plugin.
Exposure
Brightness multiplier. 1 = neutral.
Environment Lighting
Lighting that affects the model's surface. Custom Color generates a real HDR (Radiance) data URI of the chosen colour - properly tints PBR materials including metals.
Environment Color
Tints the model evenly from all directions. Pair with Tone Mapping = Neutral or AGX for best results.
Environment Intensity
How bright the environment is. The slider uses an exponential curve, so each step roughly doubles brightness: 3 = matte (LDR ceiling), 5 = noticeable, 7 = bright, 10 = studio-bright, 13+ = metallic-friendly. Models with metallic or rough surfaces typically need 10+. If your model still looks dark at 15, the issue is the model materials themselves, not this slider.
Show as Background
When on, the chosen environment colour is also painted as the background of the model viewer. Most useful as a diagnostic ("is the environment even applying?") and for product-style scenes where the model should sit inside a coloured space rather than floating on a transparent background.
Tone Mapping
This setting has no help text in the plugin.
Style & Loader
Sizing Mode
Fixed Height: classic responsive width with fixed pixel height. Aspect Ratio: canvas scales proportionally with the parent div. Fill Container: canvas matches the parent div's exact dimensions (parent must have a height set).
Aspect Ratio
This setting has no help text in the plugin.
Custom Aspect Ratio
Format: width/height, e.g. 16/9, 5/3, 1.5/1.
Width
CSS width (e.g. 100%, 500px).
Height
CSS height (e.g. 500px, 70vh).
Background
This setting has no help text in the plugin.
Background / Gradient Start
This setting has no help text in the plugin.
Gradient End
This setting has no help text in the plugin.
Border Radius
CSS value (e.g. 8px, 24px, 50%).
Loader Style
How to display the loading indicator while the model is downloading. "Default" keeps the built-in thin top bar. The other options replace it with a centred indicator. "Lottie" lets you use a custom animation file.
Loader Size
Width and height of the loader in pixels. Range: 16-300 (default 80). For Lottie animations, this is the bounding box - the animation will fit inside.
Loader Color
Colour of the spinner/pulse/dot strokes. Lottie animations have their own colours baked into the file, so this setting is ignored for Lottie.
Lottie Animation URL
Direct URL to a .lottie or .json file. Upload via the Joomla media manager and paste the link here. Free Lottie files: lottiefiles.com (sign-up required for download). If empty or invalid, falls back to a CSS spinner so the loader is never blank.
Epic 3D: Model
css
This setting has no help text in the plugin.
Epic 3D: Grid
Content & Grid
Models
The 3D models in this grid. Each item shows as a card using its Poster Image (items without a poster get a neutral cube placeholder - posters are strongly recommended here). Clicking a card opens the model in a modal viewer.
Look Preset
Curated bundles of rotation, camera and lighting settings for the modal viewer. Product Studio: slow turn, soft studio shadow - clean e-commerce look. Hero Showcase: slow counter-turn, a touch dramatic. Technical Viewer: no motion, full camera freedom. Minimal: static, rotate-only, shadowless. NOTE: any preset other than Custom overrides the Rotation and Camera/Lighting settings; switch back to Custom to control those manually. Items, grid layout, modal layout and Loader are never overridden.
Columns (desktop)
Number of cards per row on desktop. Tablets show at most 2, phones always 1.
Gap
This setting has no help text in the plugin.
Card Text
What to show under each thumbnail.
Card Title Display
Below the image: the title (and caption) sit under each thumbnail, centred. On hover: the text is hidden until the visitor hovers the card, then fades in over the bottom of the image. On touch devices, where hovering is not possible, the text stays visible. Keyboard users see it when the card receives focus.
Thumbnail Fit
Fit whole image (recommended): the entire poster is always visible inside the card, with the card background showing around it - nothing is ever cut off the top or bottom. Fill card: the image is scaled to cover the whole card and the overflowing edges are cropped, giving uniform edge-to-edge cards.
Auto-generate Missing Thumbnails
On by default. When a model has no Poster Image, generate the card thumbnail from the 3D model itself. The model is loaded and snapshotted in the background, one at a time, only when its card scrolls into view, and the result is cached for the visit. Note: generating a thumbnail downloads that model file, so a real Poster Image is still lighter and usually looks better - treat this as a convenient fallback for models you have not given a poster.
Hover Effect
This setting has no help text in the plugin.
Card Border Radius
CSS value (e.g. 0, 8px, 16px).
Preload on Hover
Start downloading a card's model file the moment the cursor enters it, so the modal usually opens with the model already cached. Turn off to save bandwidth on very large models.
Modal
Modal Size
This setting has no help text in the plugin.
Modal Viewer Aspect Ratio
This setting has no help text in the plugin.
Modal Background
Background colour of the modal viewer area.
Show Title & Caption in Modal
This setting has no help text in the plugin.
Motion & Camera
Auto-Rotate
The model spins in the modal until the visitor grabs it.
Direction
This setting has no help text in the plugin.
Rotation Speed (deg / sec)
Higher = faster spin. 30 is a relaxed pace.
Auto-Rotate Delay (ms)
How long after user stops interacting before rotation resumes.
Camera Controls
Allow the visitor to drag and zoom the model in the modal.
Interaction Prompt
Subtle hint that the model can be rotated by the user.
Allow Zoom
Mouse-wheel and pinch-to-zoom interaction. Default ON in the grid modal: unlike an inline element, a modal is an explicit "inspect this" context where zoom is expected.
Allow Pan
Right-click drag (or two-finger drag) to pan the model.
Allow Rotate
Click-and-drag to rotate. Note: turning this off snaps the camera to a front-facing view (theta 0deg, phi 75deg) and conflicts with Auto-Rotate (which animates the orbit). Disable Auto-Rotate too if you want a fully locked view.
AR Button (mobile)
Show "View in your space" button on supported mobile devices for the model open in the modal.
Lighting & Loader
Shadow Intensity
This setting has no help text in the plugin.
Shadow Softness
This setting has no help text in the plugin.
Exposure
Brightness multiplier. 1 = neutral.
Environment Lighting
Lighting that affects the model's surface in the modal. Custom Color generates a real HDR (Radiance) file of the chosen colour - properly tints PBR materials including metals.
Environment Color
Tints the model evenly from all directions. Pair with Tone Mapping = Neutral or AGX for best results.
Environment Intensity
How bright the environment is. The slider uses an exponential curve, so each step roughly doubles brightness: 3 = matte (LDR ceiling), 5 = noticeable, 7 = bright, 10 = studio-bright, 13+ = metallic-friendly. Models with metallic or rough surfaces typically need 10+. If your model still looks dark at 15, the issue is the model materials themselves, not this slider.
Show as Background
When on, the chosen environment colour is also painted as the background of the modal viewer (on top of the Modal Background colour).
Tone Mapping
This setting has no help text in the plugin.
Loader Style
Loading indicator shown in the modal while the model downloads. "Default" keeps the built-in thin top bar. The other options replace it with a centred indicator. "Lottie" lets you use a custom animation file.
Loader Size
Width and height of the loader in pixels. Range: 16-300 (default 80). For Lottie animations, this is the bounding box - the animation will fit inside.
Loader Color
Colour of the spinner/pulse/dot strokes. Lottie animations have their own colours baked into the file, so this setting is ignored for Lottie.
Lottie Animation URL
Direct URL to a .lottie or .json file. Upload via the Joomla media manager and paste the link here. Free Lottie files: lottiefiles.com (sign-up required for download). If empty or invalid, falls back to a CSS spinner so the loader is never blank.
Epic 3D: Grid
css
This setting has no help text in the plugin.
Epic 3D: Gallery
Content & Gallery
Models
The 3D models in this gallery. Each item has its own model file, poster image, caption and orientation. Camera, lighting, style and loader settings are shared by all slides (set them in the other tabs).
Look Preset
Curated bundles of rotation, animation, camera and lighting settings, applied to every slide. Product Studio: slow turn, soft studio shadow, zoom off - clean e-commerce look. Hero Showcase: gentle float and slow counter-turn for landing pages. Technical Viewer: no motion, full camera freedom for inspection. Minimal: static, rotate-only, shadowless. NOTE: any preset other than Custom overrides the Rotation and Animation settings and the camera/lighting settings; switch back to Custom to control those manually. Items, layout (Style tab) and Loader are never overridden.
Model Loading
Lazy (recommended): the first 3D file only downloads when the gallery scrolls near the viewport. Eager: start downloading immediately - use for above-the-fold hero galleries. Later slides always load on navigation (see Preload Next Model in the Gallery tab).
Navigation
How visitors move between models. Thumbnails uses each item's poster image as a clickable strip (items without a poster show a numbered button) and includes arrows.
Show Captions
Display each item's title and caption text with the slide.
Caption Position
This setting has no help text in the plugin.
Autoplay
Advance to the next model automatically. Pauses while the visitor interacts with the model, and is disabled entirely for visitors with the OS-level reduced-motion preference.
Autoplay Interval (seconds)
Time each model stays on screen before advancing. Remember each slide may need a moment to download first.
Preload Next Model
After the current model finishes loading, quietly download the next item's file in the background so navigation feels instant. Turn off to save bandwidth on very large models.
Auto-generate Missing Thumbnails
On by default. Only used when Navigation is set to Thumbnails: when a model has no Poster Image, the thumbnail strip button is filled with a snapshot rendered from the model itself (lazy, one at a time, cached for the visit) instead of a plain number. A real Poster Image is still lighter and usually looks better.
Motion
Auto-Rotate
This setting has no help text in the plugin.
Direction
This setting has no help text in the plugin.
Rotation Speed (deg / sec)
Higher = faster spin. 30 is a relaxed pace.
Auto-Rotate Delay (ms)
How long after user stops interacting before rotation resumes.
Wrapper Animation
CSS animation applied to the whole gallery container.
Animation Speed
This setting has no help text in the plugin.
Animation Intensity
This setting has no help text in the plugin.
Glow Color
Colour of the glow halo around the gallery. Default is a soft blue.
Glow Size
Multiplier on the glow blur radius. 1 = default, 2 = twice as big, 0.5 = half as big. Combine with Animation Intensity (Subtle/Medium/Strong) for full control.
Camera & Lighting
Camera Controls
Allow the visitor to drag and zoom the models.
Interaction Prompt
Subtle hint that the model can be rotated by the user.
Allow Zoom
Mouse-wheel and pinch-to-zoom interaction.
Allow Pan
Right-click drag (or two-finger drag) to pan the model.
Allow Rotate
Click-and-drag to rotate. Note: turning this off snaps the camera to a front-facing view (theta 0deg, phi 75deg) and conflicts with Auto-Rotate (which animates the orbit). Disable Auto-Rotate too if you want a fully locked view.
AR Button (mobile)
Show "View in your space" button on supported mobile devices. Applies to the currently shown model.
Pause animation when interacting
When on, the wrapper animation freezes the moment the user clicks or touches the model, so they can rotate/pan/zoom without the wrapper moving. Only meaningful when a Wrapper Animation is selected.
Resume after (seconds)
How long to wait after the user stops interacting before resuming the wrapper animation. Range 0-60. Set to 0 to never auto-resume (animation stays paused until the page is reloaded).
Shadow Intensity
This setting has no help text in the plugin.
Shadow Softness
This setting has no help text in the plugin.
Exposure
Brightness multiplier. 1 = neutral.
Environment Lighting
Lighting that affects the models' surfaces, shared by every slide. Custom Color generates a real HDR (Radiance) file of the chosen colour - properly tints PBR materials including metals.
Environment Color
Tints the models evenly from all directions. Pair with Tone Mapping = Neutral or AGX for best results.
Environment Intensity
How bright the environment is. The slider uses an exponential curve, so each step roughly doubles brightness: 3 = matte (LDR ceiling), 5 = noticeable, 7 = bright, 10 = studio-bright, 13+ = metallic-friendly. Models with metallic or rough surfaces typically need 10+. If your model still looks dark at 15, the issue is the model materials themselves, not this slider.
Show as Background
When on, the chosen environment colour is also painted as the background of the model viewer. Most useful as a diagnostic ("is the environment even applying?") and for product-style scenes where the models should sit inside a coloured space rather than floating on a transparent background.
Tone Mapping
This setting has no help text in the plugin.
Style & Loader
Sizing Mode
Fixed Height: classic responsive width with fixed pixel height. Aspect Ratio: canvas scales proportionally with the parent div. Fill Container: canvas matches the parent div's exact dimensions (parent must have a height set). One size applies to every slide so the page never jumps between models.
Aspect Ratio
This setting has no help text in the plugin.
Custom Aspect Ratio
Format: width/height, e.g. 16/9, 5/3, 1.5/1.
Width
CSS width (e.g. 100%, 500px).
Height
CSS height (e.g. 500px, 70vh).
Background
This setting has no help text in the plugin.
Background / Gradient Start
This setting has no help text in the plugin.
Gradient End
This setting has no help text in the plugin.
Border Radius
CSS value (e.g. 8px, 24px, 50%).
Loader Style
How to display the loading indicator while a model is downloading (shown on the first load AND on every slide change while the next model downloads). "Default" keeps the built-in thin top bar. The other options replace it with a centred indicator. "Lottie" lets you use a custom animation file.
Loader Size
Width and height of the loader in pixels. Range: 16-300 (default 80). For Lottie animations, this is the bounding box - the animation will fit inside.
Loader Color
Colour of the spinner/pulse/dot strokes. Lottie animations have their own colours baked into the file, so this setting is ignored for Lottie.
Lottie Animation URL
Direct URL to a .lottie or .json file. Upload via the Joomla media manager and paste the link here. Free Lottie files: lottiefiles.com (sign-up required for download). If empty or invalid, falls back to a CSS spinner so the loader is never blank.
Epic 3D: Gallery
css
This setting has no help text in the plugin.
3D Model
Model
Model URL (.glb / .gltf)
Direct URL to a .glb or .gltf file. Upload via the Joomla media manager and link it here.
Poster Image
Optional but recommended in a gallery: shown while this model loads, and used as the thumbnail when Navigation is set to Thumbnails.
Title
Shown as the caption heading when captions are on, and as this item's label in the list on the left.
Caption
Optional text under the title when captions are on.
Alt Text
This setting has no help text in the plugin.
Orientation
Rotate Y (turn left/right)
Permanently rotates this model around its vertical axis. Use this to correct models that were exported facing the wrong direction. -180 to +180. Most common fix: try 90, -90, or 180.
Rotate X (tilt up/down)
Permanently tilts this model forward or backward. Useful for models exported lying on their side. -90 to +90.
Advanced orientation (roll pitch yaw)
Optional. Direct orientation string in model-viewer format: "<roll> <pitch> <yaw>" with deg or rad units. Example: "0deg 90deg 0deg". When set, overrides the sliders above. Leave empty to use the sliders.
- Hits: 1004