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. | ||
=== How to use it | === How to use it === | ||
# Click "Upload a file" in the left navigation bar. | # Click "Upload a file" in the left navigation bar. | ||
# Select your file and upload it | # Select your file and upload it | ||
| Line 18: | Line 18: | ||
</pre> | </pre> | ||
=== 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". | ||
| Line 31: | Line 30: | ||
* '''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 === | |||
=== Export .json files | |||
* Blender: https://www.electronicarmory.com/articles/exporting-blender-models-to-threejs-webgl/ | * Blender: https://www.electronicarmory.com/articles/exporting-blender-models-to-threejs-webgl/ | ||
* Rhino2Json: https://www.food4rhino.com/app/rhinotojson | * Rhino2Json: https://www.food4rhino.com/app/rhinotojson | ||
* Autocad: https://forums.autodesk.com/t5/objectarx/how-to-export-json-file-from-autocad/td-p/7761446 | * Autocad: https://forums.autodesk.com/t5/objectarx/how-to-export-json-file-from-autocad/td-p/7761446 | ||
=== Model control === | |||
=== Model control | |||
* ←↑→↓ keys - rotating models. | * ←↑→↓ keys - rotating models. | ||
* Double click, double tap - pause/play model rotation. | * Double click, double tap - pause/play model rotation. | ||
| Line 48: | Line 44: | ||
* Right key hold and move - camera pan. | * Right key hold and move - camera pan. | ||
* Mouse wheel, hold wheel and move, pinch - zoom in/out. | * Mouse wheel, hold wheel and move, pinch - zoom in/out. | ||
=== Further Links === | |||
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy | |||
== Sketchfab == | == Sketchfab == | ||
Sketchfab is a platform to publish, share, discover, buy and sell 3D, VR and AR content. It provides a viewer based on the WebGL and WebVR technologies that allows users to display 3D models on the web, to be viewed on any mobile browser, desktop browser or Virtual Reality headset. In addition to static 3D models, the viewer is able to play and control 3D animations. 3D models can be uploaded to Sketchfab from its website or directly from various 3D software, using plugins. | Sketchfab is a platform to publish, share, discover, buy and sell 3D, VR and AR content. It provides a viewer based on the WebGL and WebVR technologies that allows users to display 3D models on the web, to be viewed on any mobile browser, desktop browser or Virtual Reality headset. In addition to static 3D models, the viewer is able to play and control 3D animations. 3D models can be uploaded to Sketchfab from its website or directly from various 3D software, using plugins. | ||
=== How to use it === | |||
# Create an account on https://sketchfab.com/ | # Create an account on https://sketchfab.com/ | ||
# Upload your model: https://sketchfab.com/signup?next=%2Ffeed%23upload | # Upload your model: https://sketchfab.com/signup?next=%2Ffeed%23upload | ||
| Line 83: | Line 83: | ||
</html> | </html> | ||
=== Further Links === | |||
* Docu? | |||
== Mozilla SPOKE == | == Mozilla SPOKE == | ||
Create 3D social scenes for Mozilla Hubs. Hubs is a social VR platform that runs right in your browser. With Hubs you can create your own virtual space with a single click and invite others to join using a URL. No installation process or app store required. Spoke is the built-in scene editor for creating environments that can be used in Hubs rooms. The editor runs entirely in the browser, and allows you to upload your own 3D models, images, and files to use in your projects. Spoke also contains building kits and integrations with various content providers to help you build. | |||
=== How to use it === | |||
# Create account on HUBS: https://hubs.mozilla.com/#/ | |||
# Access SPOKE: https://hubs.mozilla.com/spoke/ | |||
# Create your scene in SPOKE | |||
# Save it and access it in HUBS, share it with others by sharing the room-link | |||
=== Further Links === | |||
* Detailed Documentation: https://hubs.mozilla.com/docs/spoke-creating-projects.html | |||
Revision as of 16:16, 14 April 2020
3D Alloy Extension in Wiki
JavaScript Object Notation (JSON) is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value).
- Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.
How to use it
- Click "Upload a file" in the left navigation bar.
- Select your file and upload it
- Use the syntax below to include it in your page:
{{#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.
Further Links
Sketchfab
Sketchfab is a platform to publish, share, discover, buy and sell 3D, VR and AR content. It provides a viewer based on the WebGL and WebVR technologies that allows users to display 3D models on the web, to be viewed on any mobile browser, desktop browser or Virtual Reality headset. In addition to static 3D models, the viewer is able to play and control 3D animations. 3D models can be uploaded to Sketchfab from its website or directly from various 3D software, using plugins.
How to use it
- 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: 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
- Integrate a model in a mediawiki page by adding the html-tag before and after:
- copy/ paste the embed code from your model site.
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/4eeb76a3151f4de0a2fc08060c74cbbd/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>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
<a href="https://sketchfab.com/3d-models/kitchen-dining-set-4eeb76a3151f4de0a2fc08060c74cbbd?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Kitchen Dining Set</a>
by <a href="https://sketchfab.com/steelefrau?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Steele</a>
on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
</p>
</div>
</html>
Further Links
- Docu?
Mozilla SPOKE
Create 3D social scenes for Mozilla Hubs. Hubs is a social VR platform that runs right in your browser. With Hubs you can create your own virtual space with a single click and invite others to join using a URL. No installation process or app store required. Spoke is the built-in scene editor for creating environments that can be used in Hubs rooms. The editor runs entirely in the browser, and allows you to upload your own 3D models, images, and files to use in your projects. Spoke also contains building kits and integrations with various content providers to help you build.
How to use it
- Create account on HUBS: https://hubs.mozilla.com/#/
- Access SPOKE: https://hubs.mozilla.com/spoke/
- Create your scene in SPOKE
- Save it and access it in HUBS, share it with others by sharing the room-link
Further Links
- Detailed Documentation: https://hubs.mozilla.com/docs/spoke-creating-projects.html