Extension:3DAlloy
Description
3DAlloy allows to add an interactive viewer for 3D models to wiki pages. Based on THREE.js, it renders images with CanvasRenderer. There you can see the example 3D model page.
Supported file extensions
THREE.js model format:
- .json
- .3djson
- .3dj
- .three
THREE.js model buffer geometry format:
- .buff
- .buffjson
OBJ file format:
- .obj
STL (binary) file format:
- .stl
- .stlb
Install
- Download and place the file(s) in a directory called
3DAlloyin yourextensions/folder. - Add the following code at the bottom of your LocalSettings.php file:
wfLoadExtension( '3DAlloy' );
- Modify $wgFileExtensions parameter:
$wgFileExtensions = array_merge(
$wgFileExtensions, array(
'json', '3dj', '3djson', 'three',
'buff', 'buffjson',
'obj',
'stl', 'stlb'
)
);
Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.
Usage
As Image Handler
[[File:Model.json|300x300px|color=,opacity=,...]]
As Parser function
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|zoom|pan|norotate|scale|z|style|class}}
Instead of a filename you can also use a URL for a file located in a external site.
As Parser tag
<3d file="Model.json" width="" height="" ... ></3d>
or
<3d width="" height="" ... >Model.json</3d>
You also can use a URL instead of a filename.
Parameters
| Name | Description | Default value |
|---|---|---|
| width | Canvas width in pixels | 300 |
| height | Canvas height in pixels | 300 |
| color | Model RGB color as hex | 0xff00ff |
| opacity | Model opacity as decimal between 0...1 | 0.8 |
| zoom | If true or 1, canvas can be zoomed | false |
| pan | If true or 1, canvas can be panned | false |
| norotate | If true or 1, model does not rotate | false |
| scale | Model scale as decimal between 0...1 | 1 |
| z | Model z coordinate | 75 |
| style | Additional canvas CSS style | |
| class | Additional canvas HTML class |
If width and height are both 0, viewer size will be set according to screen dimensions.
Configure
All default values can be changed in your LocalSettings.php file:
$wg3DAlloy["width"] = 500;
$wg3DAlloy["height"] = 400;
...
$wg3DAlloy["class"] = 'someclass';
Controls and hotkeys
Hotkeys are automatically disabled while you edit or submit a wiki page.
| Action | Controls |
|---|---|
| Camera rotate | Swipe, left mouse key hold and move |
| Camera zoom (if zoom enabled) | Mouse wheel, hold wheel and move, pinch |
| Camera pan (if pan enabled) | Right key hold and move |
| Model rotate | ←↑→↓ keys |
| Model rotation reset | Home key |
| Model rotation play/pause | Double click, double tap |
| Model rotation play/pause all models at page | Enter, Space keys |
| Model rotation speed | - and + keys |
