Model3DViewer
New in Tiki30, Model3DViewer is a Tiki plugin for displaying interactive 3D models directly on wiki pages, trackers, and other Tiki content. It supports multiple formats (.glb, .gltf, .stl, .obj, .fbx, .dae, .ply, .3ds, .vrml, .x3d) using Three.js for rendering. Features include camera controls, auto-rotation, lighting presets, shadows, and animation support.
Parameters
Display one or more custom-formatted 3D modelsIntroduced in Tiki 30. Required parameters are in
bold.Go to the source code
Preferences required: wikiplugin_model3dviewer
| Parameters | Accepted Values | Description | Default | Since |
|---|---|---|---|---|
type |
(blank) fileId src |
Choose where to get the 3D model from | 30.0 | |
src |
url | Full URL to the 3D Model to display. | 30.0 | |
fileId |
Numeric ID of a 3D model in a file gallery (or a comma- or |-separated list of IDs). |
30.0 | ||
camera_position |
text | Optional camera position for 3D viewer, as X,Y,Z coordinates (e.g. "0,1,5"). Only for supported viewers. | 30.0 | |
desc |
text | Image caption. Use name or desc or namedesc for Tiki name and
description properties, idesc or ititle for metadata from the image itself, otherwise
enter your own description. |
30.0 | |
height |
text | Height in pixels or percent. Syntax: 100 or 100px means 100 pixels;
50% means 50 percent. Default is 400px. |
400px | 30.0 |
width |
text | Width in pixels or percent. Syntax: 100 or 100px means 100 pixels;
50% means 50 percent. Default is 100%. |
100 | 30.0 |
backgroundColor |
text | Hex background color for the viewer (e.g., "#ffffff"). Leave blank for transparent. | 30.0 | |
autorotate |
y n |
Enable or disable auto-rotation of the 3D model. Supported by some viewers. | n | 30.0 |
autoplay |
y n |
Automatically start animation on model load if any. | n | 30.0 |
camera_type |
perspective orthographic |
Type of camera to use , Perspective mimics human eye, Orthographic is a parallel projection. | Perspective | 30.0 |
controls |
y n |
Allow mouse/touch camera control (orbit, zoom). | y | 30.0 |
shadow |
y n |
Render model shadows (if supported by viewer). | n | 30.0 |
light_type |
default studio rembrandt portrait soft |
Lighting mode (e.g., "soft", "rembrandt"). Applies mainly to Model Viewer. | 30.0 | |
animation_loop |
y n |
Enable or disable looping of the animation. | n | 30.0 |
exposure |
float | Adjust scene brightness. Applies to some 3D viewers. | 1.0 | 30.0 |
Why Choose Model3DViewer?
- Instead of static images or screenshots?
- Fully interactive—users can inspect the model from any angle
- No need for multiple rendered views; one model shows everything
- Enables understanding of spatial relationships and mechanics
- Instead of external 3D hosting services?
- Data stays within your Tiki installation (when using file galleries)
- Respects Tiki's permission system and access controls
- No tracking, ads, or dependency on third‑party uptime
- Seamless integration with wiki pages, trackers, and articles
Since which version?
- Plugin available since Tiki 30.0
- Unified and documented support for fileId and src
- Integration with File Galleries and permissions
- Instead of File Gallery downloads only?
- Instant preview without downloading the file
- Web-optimised rendering with adaptive controls
The Model3DViewer plugin brings professional 3D visualisation capabilities directly into your wiki. Whether you're showcasing products, teaching complex concepts, or documenting technical designs, this plugin transforms static content into interactive experiences.
Powered by the industry‑standard Three.js WebGL engine, it handles models from simple STL files for 3D printing to complex GLB scenes with animations and materials. The viewer is fully responsive, works on mobile devices, and integrates seamlessly with Tiki's existing file gallery and permission systems.
Unlike external 3D services, your models remain under your control—hosted in your file galleries, protected by your permission rules, and presented in your site's design.
Quick Start Guide
- Upload a 3D model to your File Gallery
- Note the File ID shown in the gallery
- Embed it with minimal code:
{model3dviewer type="fileId" fileId="123" height="400px"}
- Adjust `height` and `width` as needed
- Control the initial view:
{model3dviewer fileId="123" camera_position="0,1,5" camera_type="perspective"}
- Set lighting and atmosphere:
{model3dviewer fileId="123" light_type="studio" exposure="1.2" shadow="y"}
- Enable auto‑rotation:
{model3dviewer fileId="123" autorotate="y"}
- For animated models (GLB/GLTF):
{model3dviewer fileId="456" autoplay="y" animation_loop="y"}
- Control playback:
- `autoplay="y"` – starts animation immediately
- `animation_loop="y"` – repeats animation
- Some formats don't support animation
- Create a tracker field of type **3D Model Viewer**
- Choose input mode: `local` (file gallery), `external` (URL), or `both`
- Each tracker item can display attached 3D models
- Field respects tracker‑item permissions
Parameters Reference
| Parameter | Required | Description | Default | Since |
| type | Yes | 3D Model Source. Choose where to get the 3D model from. Options: "fileId" (from file galleries) or "src" (external URL) | (none) | 29.0 |
| fileId | Yes (if type="fileId") | Numeric ID of a 3D model in a file gallery (or comma/pipe-separated list of IDs) | (none) | 29.0 |
| src | Yes (if type="src") | Full URL to the 3D Model to display | (none) | 28.0 |
| camera_position | No | Optional camera position for 3D viewer, as X,Y,Z coordinates (e.g. "0,1,5") | (empty) | 29.0 |
| camera_type | No | Type of camera to use. Options: "perspective" (human eye-like) or "orthographic" (parallel projection) | "perspective" | 29.0 |
| autorotate | No | Enable or disable auto-rotation of the 3D model | "n" | 29.0 |
| backgroundColor | No | Hex background color for the viewer (e.g., "#ffffff"). Leave blank for transparent | (empty) | 29.0 |
| height | No | Height in pixels or percent. Syntax: "100" or "100px" means 100 pixels; "50%" means 50 percent | "400px" | 29.0 |
| width | No | Width in pixels or percent. Syntax: "100" or "100px" means 100 pixels; "50%" means 50 percent | "100%" | 29.0 |
| desc | No | Image caption. Use "name" or "desc" or "namedesc" for Tiki name and description properties, "idesc" or "ititle" for metadata from the image itself, otherwise enter your own description | (empty) | 29.0 |
| controls | No | Allow mouse/touch camera control (orbit, zoom) | "y" | 29.0 |
| shadow | No | Render model shadows (if supported by viewer) | "n" | 29.0 |
| light_type | No | Lighting mode. Options: "default", "studio", "rembrandt", "portrait", "soft" | "default" | 29.0 |
| exposure | No | Adjust scene brightness. Applies to some 3D viewers. Range: 0.1 to 5.0 | "1.0" | 29.0 |
| autoplay | No | Automatically start animation on model load if any | "n" | 29.0 |
| animation_loop | No | Enable or disable looping of the animation | "n" | 29.0 |
Feature Showcase: Complete Example
This example shows all major features in one viewer. Copy and adapt for your own use.
{model3dviewer type="fileId" fileId="789" autorotate="y" camera_position="2,2,8" camera_type="perspective" height="500px" width="90%" backgroundColor="#1a1a2e" controls="y" shadow="y" light_type="rembrandt" exposure="1.3" autoplay="y" animation_loop="y" desc="Engineering Prototype v2.3 - Interactive 3D Model" }
Pro Tip: Use `camera_type="orthographic"` for technical drawings and CAD models where perspective distortion is unwanted.
Permissions & Security
| Permission | Purpose | |||
| tiki_p_download_files | Required to view models from file galleries | |||
| tiki_p_upload_files | Required to upload models to galleries | |||
| tiki_p_admin_wiki | Required to edit pages containing the plugin | |||
| Plugin-specific permissions | Control who can use the plugin (Admin → Plugins) | |||
| Tracker item permissions | Control access to tracker fields with 3D models | |||
Security Note: External URLs (`src` parameter) are sanitized to block `ja
Troubleshooting Guide
- Check the browser console (F12 → Console) for JavaScript errors
- Verify file permissions – user needs `tiki_p_download_files`
- Test the URL directly – for external sources, ensure CORS headers allow embedding
- Clear Tiki caches – Admin → System → Clear all caches
- Optimize your 3D model – reduce polygon count, compress textures
- Use GLB format – most efficient for web delivery
- Limit multiple viewers – consider carousel for many models
- Check file size – models over 50MB may load slowly
- Ensure format supports animation – GLB/GLTF work best
- Verify animation data exists – some models are static
- Check `autoplay="y"` parameter
- Try different browsers – WebGL implementation varies
- Supported formats: .glb, .gltf, .stl, .obj, .fbx, .dae, .ply, .3ds, .vrml, .x3d
- Convert unsupported formats – use Blender or online converters
- Check MIME type – file gallery may misidentify some 3D formats
Format Comparison Guide
| Format | Best For | Limitations | Animation | |
| .glb / .gltf | Web display, animations | — | ✓ Excellent | |
| .stl | 3D printing, simple models | No colors/textures | ✗ None | |
| .obj | Compatibility, materials | Needs separate .mtl file | ✗ Limited | |
| .fbx | Game assets, complex scenes | May need conversion | ✓ Good | |
| .dae (Collada) | CAD exchange, archiving | Large file size | ✓ Yes | |
| .ply | 3D scanning, point clouds | Limited material support | ✗ None | |
Recommendation: Use **GLB format** for web display whenever possible. It's compact, supports animations and materials, and loads fastest in browsers.
Real-World Examples
Product Catalog
* Interactive product exploration
* 360° view of items
* Technical specifications overlay
* Customer can inspect before purchase
Education & Training
* Anatomical models for medicine
* Engineering part disassembly
* Architectural walkthroughs
* Historical artifact examination
Technical Documentation
* Assembly instructions
* Maintenance procedures
* Exploded views
* Measurement tools (via annotations)
Community Projects
* 3D printing file sharing
* Game mod development
* Open‑source hardware
* Collaborative design review
Advanced Configuration
theme_model3dviewer_default_background
Default
This version does not contain the plugin yet so we cannot show anything here.
- Description: Default background for 3D models. This can be overridden by the backgroundColor parameter in the Model3DViewer plugin.
- Example values: #243d40, grey, #ffffff, transparent
- Default: #ffffff
Admin → Look & Feel → Themes: set default 3D viewer background
Related Resources
- https://threejs.org/ – Three.js library documentation
- https://github.com/mrdoob/three.js/ – Three.js GitHub repository
- PluginModel3DViewer – Developer documentation
- Model3DViewer – Plugin reference
- Blender – Free 3D modeling software
- Google Model Viewer – Reference for web 3D best practices
FAQ
Q: Can I use Model3DViewer in articles and blogs?
A: Yes! The plugin works anywhere wiki syntax is supported.
Q: Are there file size limits?
A: Limits are set by your PHP configuration (`upload_max_filesize`, `post_max_size`) and web server. For very large models, consider optimization or streaming solutions.
Q: Can I embed multiple viewers on one page?
A: Yes, but performance may suffer with many complex models. Consider a carousel or lazy loading.
Q: Does it work on mobile devices?
A: Yes, with full touch controls (pinch to zoom, drag to rotate).
Q: Can users download the original model files?
A: Only if they have `tiki_p_download_files` permission and the model is from a file gallery.
Aliases