Threejs, Andreas: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| Line 51: | Line 51: | ||
* https://sketchfab.com/3d-models/kitchen-dining-set-4eeb76a3151f4de0a2fc08060c74cbbd | * https://sketchfab.com/3d-models/kitchen-dining-set-4eeb76a3151f4de0a2fc08060c74cbbd | ||
# When you add /embed after the page link: | |||
* https://sketchfab.com/3d-models/kitchen-dining-set-4eeb76a3151f4de0a2fc08060c74cbbd/embed | * https://sketchfab.com/3d-models/kitchen-dining-set-4eeb76a3151f4de0a2fc08060c74cbbd/embed | ||
# Integrate a model in a mediawiki page: | |||
* copy/ paste the embed code from: | |||
<pre class="wiki"> | |||
<html> | |||
<div class="sketchfab-embed-wrapper"> | |||
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/b70bf0f89d6e4f4197d171c56ceef4ab/embed?preload=1&ui_controls=1&ui_infos=1&ui_inspector=1&ui_stop=1&ui_watermark=1&ui_watermark_link=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe> | |||
</div> | |||
</html> | |||
</pre> | |||
<html> | <html> | ||
<div class="sketchfab-embed-wrapper"> | <div class="sketchfab-embed-wrapper"> | ||
Revision as of 15:47, 14 April 2020
3D Alloy Extension
- Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
Available parameters:
- width - width of drawing area (canvas) in pixels. When set to "0", size is determined automatically. Default value - "200".
- height - height of drawing area in pixels. When set to "0", size is determined automatically. Default value - "200".
- color - color of model in hex format, 0xffffff. Default value - "0xff00ff". https://www.color-hex.com/
- opacity - decimal from 0.0 - full transparent to 1.0 - full opaque. Default value - "0.8".
- norotate - disables automatic model rotation if value is not empty. Use it for high polygonal models which consumes too much browser resources. Default value - "0".
- scale - model scale relative to drawing area size, in percent. Default value - "100"
- z - model z coordinate, a lift height over a grid, in pixel. Default value - "75"
- style - CSS style of drawing area. Default value - "".
- class - HTML class of drawing area. Default value - "".
- description - displays under model, by default is a link to model page. If value is set to "-", then description hides.
Export .json files:
- Blender: https://www.electronicarmory.com/articles/exporting-blender-models-to-threejs-webgl/
- Rhino2Json: https://www.food4rhino.com/app/rhinotojson
- Autocad: https://forums.autodesk.com/t5/objectarx/how-to-export-json-file-from-autocad/td-p/7761446
Model control:
- ←↑→↓ keys - rotating models.
- Double click, double tap - pause/play model rotation.
- Enter, Space keys - pause/play models rotation from all page.
- - and + keys - decreasing/increasing rotation speed.
- Home key - reset rotation angles to default values.
- Swipe, left mouse key hold and move - camera rotation.
- Right key hold and move - camera pan.
- Mouse wheel, hold wheel and move, pinch - zoom in/out.
Sketchfab
- Create an account on https://sketchfab.com/
- Upload your model: https://sketchfab.com/signup?next=%2Ffeed%23upload
- Once a model is uploaded and ready, you can link to it.
- When you add /embed after the page link:
- Integrate a model in a mediawiki page:
- copy/ paste the embed code from:
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/b70bf0f89d6e4f4197d171c56ceef4ab/embed?preload=1&ui_controls=1&ui_infos=1&ui_inspector=1&ui_stop=1&ui_watermark=1&ui_watermark_link=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
</html>