Threejs, Andreas: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 6: | Line 6: | ||
* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender. | * Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender. | ||
Available parameters: | Available parameters: | ||
* width - width of drawing area (canvas) in pixels. When set to "0", size is determined automatically. Default value - "200". | * '''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". | * '''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". | * '''color''' - color of model in hex format, 0xffffff. Default value - "0xff00ff". | ||
* opacity - decimal from 0.0 - full transparent to 1.0 - full opaque. Default value - "0.8". | * '''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". | * 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" | * '''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" | * '''z''' - model z coordinate, a lift height over a grid, in pixel. Default value - "75" | ||
* style - CSS style of drawing area. Default value - "". | * '''style''' - CSS style of drawing area. Default value - "". | ||
* class - HTML class 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. | * '''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 | |||
Revision as of 08:20, 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.
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".
- 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
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
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