Threejs, Andreas

3D Alloy Extension

https://wiki.piksel.org/images/f/f1/Cube.json

• 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

1. Create an account on https://sketchfab.com/
2. Upload your model: https://sketchfab.com/signup?next=%2Ffeed%23upload

Using Sketchfab link to page:

• 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