PikselProd - User contributions [en]

File:Hubs.pdf

2020-04-24T07:22:42Z

Andreas-piksel.org:

Threejs, Andreas

2020-04-15T10:27:43Z

Andreas-piksel.org: /* 3D Alloy Extension in Wiki */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools (12.00-13.00):
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects (13:00-14:00):
* Upload a 3D model to Scetchfab and use different iframe functions to embed the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si channel: https://meet.jit.si/BAS-3D or via our general email info@piksel.no

We also sent out an email with a spread sheet with your project info and your contact info. Write down which tool
you have questions about, your question and any comments or the link to your project. We will work on your questions and also provide a FAQ on the wiki.

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Based on WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. Mainly uses JavaScript Object Notation (JSON), which 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).

[[File:Sphere.json|400x400px|color=29d819]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

==== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>

=== Export plugins from 3D programs ===
* All exporters here: https://sketchfab.com/exporters
* Video tutorials: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_

=== Further Links ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

=== Import & Export ===
* Import: Via Sketchfab or legacy Spoke (.spoke)
* Export: Publish a scene either (1) directly to Hubs, or you can export it (2) as a .glb file or as a (3) legacy Spoke (.spoke) scene.

=== Further Links ===
* Keyboard and Mouse controls: https://github.com/mozilla/Spoke/wiki/Keyboard-and-Mouse-Controls
* How to optimize a scene for SPOKE: https://hubs.mozilla.com/docs/spoke-optimization.html
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M
* DISCORD app: https://discordapp.com/invite/wHmY4nd

Threejs, Andreas

2020-04-15T10:26:53Z

Andreas-piksel.org: /* 3D Alloy Extension in Wiki */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools (12.00-13.00):
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects (13:00-14:00):
* Upload a 3D model to Scetchfab and use different iframe functions to embed the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si channel: https://meet.jit.si/BAS-3D or via our general email info@piksel.no

We also sent out an email with a spread sheet with your project info and your contact info. Write down which tool
you have questions about, your question and any comments or the link to your project. We will work on your questions and also provide a FAQ on the wiki.

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Based on WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. Mainly uses JavaScript Object Notation (JSON), which 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).

[[File:Cube.json|900x900px|color=29d819]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

==== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>

=== Export plugins from 3D programs ===
* All exporters here: https://sketchfab.com/exporters
* Video tutorials: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_

=== Further Links ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

=== Import & Export ===
* Import: Via Sketchfab or legacy Spoke (.spoke)
* Export: Publish a scene either (1) directly to Hubs, or you can export it (2) as a .glb file or as a (3) legacy Spoke (.spoke) scene.

=== Further Links ===
* Keyboard and Mouse controls: https://github.com/mozilla/Spoke/wiki/Keyboard-and-Mouse-Controls
* How to optimize a scene for SPOKE: https://hubs.mozilla.com/docs/spoke-optimization.html
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M
* DISCORD app: https://discordapp.com/invite/wHmY4nd

Threejs, Andreas

2020-04-15T10:25:58Z

Andreas-piksel.org:

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools (12.00-13.00):
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects (13:00-14:00):
* Upload a 3D model to Scetchfab and use different iframe functions to embed the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si channel: https://meet.jit.si/BAS-3D or via our general email info@piksel.no

We also sent out an email with a spread sheet with your project info and your contact info. Write down which tool
you have questions about, your question and any comments or the link to your project. We will work on your questions and also provide a FAQ on the wiki.

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Based on WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. Mainly uses JavaScript Object Notation (JSON), which 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).

[[File:Cube.json|900x400px|color=29d819]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

==== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>

=== Export plugins from 3D programs ===
* All exporters here: https://sketchfab.com/exporters
* Video tutorials: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_

=== Further Links ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

=== Import & Export ===
* Import: Via Sketchfab or legacy Spoke (.spoke)
* Export: Publish a scene either (1) directly to Hubs, or you can export it (2) as a .glb file or as a (3) legacy Spoke (.spoke) scene.

=== Further Links ===
* Keyboard and Mouse controls: https://github.com/mozilla/Spoke/wiki/Keyboard-and-Mouse-Controls
* How to optimize a scene for SPOKE: https://hubs.mozilla.com/docs/spoke-optimization.html
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M
* DISCORD app: https://discordapp.com/invite/wHmY4nd

Threejs, Andreas

2020-04-15T09:38:01Z

Andreas-piksel.org: /* Workshop overview */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools (12.00-13.00):
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects (13:00-14:00):
* Upload a 3D model to Scetchfab and use different iframe functions to embed the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si channel: https://meet.jit.si/BAS-3D or via our general email info@piksel.no

We also sent out an email with a spread sheet with your project info and your contact info. Write down which tool
you have questions about, your question and any comments or the link to your project. We will work on your questions and also provide a FAQ on the wiki.

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Based on WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

==== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>

=== Export plugins from 3D programs ===
* All exporters here: https://sketchfab.com/exporters
* Video tutorials: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_

=== Further Links ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

=== Import & Export ===
* Import: Via Sketchfab or legacy Spoke (.spoke)
* Export: Publish a scene either (1) directly to Hubs, or you can export it (2) as a .glb file or as a (3) legacy Spoke (.spoke) scene.

=== Further Links ===
* Keyboard and Mouse controls: https://github.com/mozilla/Spoke/wiki/Keyboard-and-Mouse-Controls
* How to optimize a scene for SPOKE: https://hubs.mozilla.com/docs/spoke-optimization.html
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M
* DISCORD app: https://discordapp.com/invite/wHmY4nd

Threejs, Andreas

2020-04-15T09:35:46Z

Andreas-piksel.org: /* Workshop overview */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools (12.00-13.00):
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects (13:00-14:00):
* Upload a 3D model to Scetchfab and use different iframe functions to embed the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si channel: https://meet.jit.si/BAS-3D or via our general email info@piksel.no

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Based on WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

==== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>

=== Export plugins from 3D programs ===
* All exporters here: https://sketchfab.com/exporters
* Video tutorials: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_

=== Further Links ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

=== Import & Export ===
* Import: Via Sketchfab or legacy Spoke (.spoke)
* Export: Publish a scene either (1) directly to Hubs, or you can export it (2) as a .glb file or as a (3) legacy Spoke (.spoke) scene.

=== Further Links ===
* Keyboard and Mouse controls: https://github.com/mozilla/Spoke/wiki/Keyboard-and-Mouse-Controls
* How to optimize a scene for SPOKE: https://hubs.mozilla.com/docs/spoke-optimization.html
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M
* DISCORD app: https://discordapp.com/invite/wHmY4nd

Main Page

2020-04-15T09:32:21Z

Andreas-piksel.org:

<small style="font-size:300%;"> Welcome to BAS Projects 2020.</small>

Here you can create a new wiki page for your project. It will be automatically listed.

1.- Edit THIS page to make a new link with the name of your project and your name or team partners name.

2.- Once you have saved, click in the red link of your project and the page will be created. Now you can share the link with your team and start working on your own project/page.

[[Name of my project, My name]] ---- Don't delete this line, it serves as an example. Copy this link and write it in the next line, you will see your project in red as a link when saved.

== Student Projects ==

* [[Tales of Water, Wu-Lung Lu]]
* [[Kindergarten, Tilla Bønes]]
* [[Library Prototype, Veronika Sløk Tvedt]]
* [[Leaving urbanity, Mats Edal]]
* [[liminal landscapes, Karoline Haukjem and Emilie Van de walle]]
* [[Make Use, Axel Högberg]]
* [[Disruptive Space, Tanguy Danis]]
* [[Kjær-Leik, Hulda-Maja Konttinen]]
* [[The radical futures club for the reorganization of matter, Julia R. Morrissey, Julie Barfod, Linda V. Figueiredo]]
* [[Holocaust Recollections, Lior Israel]]
* [[Converging spaces, Stein-Atle Juvik]]

<br>
<br>

----
* [[Threejs, Andreas]]
*[[Piksel, Piksel Team]]

Main Page

2020-04-15T09:31:51Z

Andreas-piksel.org: /* Student Projects */

Threejs, Andreas

2020-04-15T09:30:28Z

Andreas-piksel.org: /* 3D Alloy Extension in Wiki */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools:
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects:
* Upload a 3D model to Scetchfab and use different iframe functions to embed the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si Talk or via email

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Based on WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

==== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>

=== Export plugins from 3D programs ===
* All exporters here: https://sketchfab.com/exporters
* Video tutorials: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_

=== Further Links ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

=== Import & Export ===
* Import: Via Sketchfab or legacy Spoke (.spoke)
* Export: Publish a scene either (1) directly to Hubs, or you can export it (2) as a .glb file or as a (3) legacy Spoke (.spoke) scene.

=== Further Links ===
* Keyboard and Mouse controls: https://github.com/mozilla/Spoke/wiki/Keyboard-and-Mouse-Controls
* How to optimize a scene for SPOKE: https://hubs.mozilla.com/docs/spoke-optimization.html
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M
* DISCORD app: https://discordapp.com/invite/wHmY4nd

Threejs, Andreas

2020-04-14T17:57:06Z

Andreas-piksel.org: /* Import & Export */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools:
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects:
* Upload a 3D model to Scetchfab and use different iframe functions to embed the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si Talk or via email

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

==== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>

=== Export plugins from 3D programs ===
* All exporters here: https://sketchfab.com/exporters
* Video tutorials: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_

=== Further Links ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

=== Import & Export ===
* Import: Via Sketchfab or legacy Spoke (.spoke)
* Export: Publish a scene either (1) directly to Hubs, or you can export it (2) as a .glb file or as a (3) legacy Spoke (.spoke) scene.

=== Further Links ===
* Keyboard and Mouse controls: https://github.com/mozilla/Spoke/wiki/Keyboard-and-Mouse-Controls
* How to optimize a scene for SPOKE: https://hubs.mozilla.com/docs/spoke-optimization.html
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M
* DISCORD app: https://discordapp.com/invite/wHmY4nd

Threejs, Andreas

2020-04-14T17:56:33Z

Andreas-piksel.org: /* Mozilla SPOKE */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools:
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects:
* Upload a 3D model to Scetchfab and use different iframe functions to embed the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si Talk or via email

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

==== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>

=== Export plugins from 3D programs ===
* All exporters here: https://sketchfab.com/exporters
* Video tutorials: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_

=== Further Links ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

=== Import & Export ===
* Import: Import via Sketchfab or legacy Spoke (.spoke)
* Export: You can publish a scene either (1) directly to Hubs, or you can export it (2) as a .glb file or as a (3) legacy Spoke (.spoke) scene.

=== Further Links ===
* Keyboard and Mouse controls: https://github.com/mozilla/Spoke/wiki/Keyboard-and-Mouse-Controls
* How to optimize a scene for SPOKE: https://hubs.mozilla.com/docs/spoke-optimization.html
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M
* DISCORD app: https://discordapp.com/invite/wHmY4nd

Threejs, Andreas

2020-04-14T17:48:15Z

Andreas-piksel.org:

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools:
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects:
* Upload a 3D model to Scetchfab and use different iframe functions to embed the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si Talk or via email

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

==== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>

=== Export plugins from 3D programs ===
* All exporters here: https://sketchfab.com/exporters
* Video tutorials: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_

=== Further Links ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg
* Sketchfab Forum: https://forum.sketchfab.com/

== 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 ===
* How to optimize a scene for SPOKE: https://hubs.mozilla.com/docs/spoke-optimization.html
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M

Threejs, Andreas

2020-04-14T17:47:04Z

Andreas-piksel.org: /* Further Links */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools:
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects:
* Upload a 3D model to Scetchfab and use different iframe functions to embed the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si Talk or via email

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>

=== Export plugins from 3D programs ===
* All exporters here: https://sketchfab.com/exporters
* Video tutorials: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_

=== Further Links ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg
* Sketchfab Forum: https://forum.sketchfab.com/

== 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 ===
* How to optimize a scene for SPOKE: https://hubs.mozilla.com/docs/spoke-optimization.html
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M

Threejs, Andreas

2020-04-14T17:40:06Z

Andreas-piksel.org: /* Workshop overview */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools:
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects:
* Upload a 3D model to Scetchfab and use different iframe functions to embed the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si Talk or via email

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>

=== Export plugins from 3D programs ===
* All exporters here: https://sketchfab.com/exporters
* Video tutorials: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_

=== Further Links ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg
* Sketchfab Forum: https://forum.sketchfab.com/

== 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
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M

Threejs, Andreas

2020-04-14T17:39:10Z

Andreas-piksel.org: /* Sketchfab */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools:
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects:
* Upload a 3D model to Scetchfab and use the iframe code to embedd the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si Talk or via email

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>

=== Export plugins from 3D programs ===
* All exporters here: https://sketchfab.com/exporters
* Video tutorials: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_

=== Further Links ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg
* Sketchfab Forum: https://forum.sketchfab.com/

== 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
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M

Threejs, Andreas

2020-04-14T17:34:42Z

Andreas-piksel.org: /* Further Links */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools:
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects:
* Upload a 3D model to Scetchfab and use the iframe code to embedd the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si Talk or via email

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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 ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg
* Sketchfab Forum: https://forum.sketchfab.com/

== 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
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M

Threejs, Andreas

2020-04-14T17:33:42Z

Andreas-piksel.org: /* Further Links */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools:
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects:
* Upload a 3D model to Scetchfab and use the iframe code to embedd the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si Talk or via email

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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 ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg (exporters: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_ )
* Sketchfab Forum: https://forum.sketchfab.com/

== 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
* HUBS and SPOKE introduction video: https://www.youtube.com/watch?v=ohM94reYB3M

Threejs, Andreas

2020-04-14T17:30:41Z

Andreas-piksel.org: /* Further Links */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools:
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects:
* Upload a 3D model to Scetchfab and use the iframe code to embedd the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si Talk or via email

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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 ===
* Youtube Channel: https://www.youtube.com/channel/UCX0J-m95VqCQIIiQ23fP5tg (exporters: https://www.youtube.com/playlist?list=PLmBa5KMEdt8JIVPSf3NEYdfuq7bxuLKI_ )
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

Threejs, Andreas

2020-04-14T17:23:46Z

Andreas-piksel.org: /* Workshop overview */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools:
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects:
* Upload a 3D model to Scetchfab and use the iframe code to embedd the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si Talk or via email

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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 ===
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

Threejs, Andreas

2020-04-14T17:23:09Z

Andreas-piksel.org: /* Workshop overview */

== Workshop overview ==
This workshop intro is split in 2 parts.

1.) An introduction to the tools:
* 3D Alloy Extension in Wiki
* Scetchfab
* Mozilla HUBS/SPOKE

2.) A pratical part where you have time to apply the tools for your projects:
* Upload a 3D model to Scetchfab and use the <iframe> code to embedd the model in your project-wiki page
* Create a scene in Mozilla SPOKE and test it in HUBS
* Export a 3D model in .json format from your 3D program and integrate it in a project-wiki page

Questions / personal trouble shooting in the Jit.si Talk or via email

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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 ===
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

Threejs, Andreas

2020-04-14T17:17:53Z

Andreas-piksel.org: /* Workshop overview */

== Workshop overview ==
This workshop intro is split in 2 parts: an introduction to the tools:
* 3D Alloy Extension in Wiki
* Scatchfab
* Mozilla SPOKE

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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 ===
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

Threejs, Andreas

2020-04-14T17:17:03Z

Andreas-piksel.org:

== Workshop overview ==
This workshop intro is split in 2 parts: an introduction to the tools:
* #REDIRECT [[3D Alloy Extension in Wiki]]

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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 ===
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

Threejs, Andreas

2020-04-14T17:13:21Z

Andreas-piksel.org: /* Further Links */

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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 ===
* Sketchfab Forum: https://forum.sketchfab.com/

== 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

Threejs, Andreas

2020-04-14T17:11:23Z

Andreas-piksel.org: /* How to use it */

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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>

* Another example:
<pre class="wiki">
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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>
</pre>
<html>
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5c4a12f4bd8f43c89849bc60fc1eb81b/embed?autospin=0.2&camera=0&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/coffe-table-5c4a12f4bd8f43c89849bc60fc1eb81b?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Coffe table</a>
by <a href="https://sketchfab.com/Oldfarmer?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Oldfarmer</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

Threejs, Andreas

2020-04-14T16:19:19Z

Andreas-piksel.org: /* 3D Alloy Extension in Wiki */

== 3D Alloy Extension in Wiki ==
MediaWiki extension which allows to add 3D models viewer to site pages. Mainly uses JavaScript Object Notation (JSON), which 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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

Threejs, Andreas

2020-04-14T16:16:23Z

Andreas-piksel.org:

== 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ===
* 3D Alloy: https://www.mediawiki.org/wiki/Extension:3DAlloy

== 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.

<pre class="wiki">
<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>
</pre>
<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

Threejs, Andreas

2020-04-14T16:03:38Z

Andreas-piksel.org:

== 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).
[[File:Cube.json|900x400px|color=e71c1c]]

* 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:
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

=== 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 ==
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.

# 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.

<pre class="wiki">
<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>
</pre>
<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>

== Mozilla SPOKE ==

Threejs, Andreas

2020-04-14T15:52:40Z

Andreas-piksel.org: /* Sketchfab */

== 3D Alloy Extension ==
[[File:Cube.json|900x400px|color=e71c1c]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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: 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.

<pre class="wiki">
<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>
</pre>
<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>

Threejs, Andreas

2020-04-14T15:52:11Z

Andreas-piksel.org: /* Sketchfab */

== 3D Alloy Extension ==
[[File:Cube.json|900x400px|color=e71c1c]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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: 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.

<pre class="wiki">
'''<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>'''
</pre>
<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>

Threejs, Andreas

2020-04-14T15:50:51Z

Andreas-piksel.org: /* Sketchfab */

== 3D Alloy Extension ==
[[File:Cube.json|900x400px|color=e71c1c]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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: 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.

<pre class="wiki">
<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>
</pre>
<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>

Threejs, Andreas

2020-04-14T15:47:23Z

Andreas-piksel.org:

== 3D Alloy Extension ==
[[File:Cube.json|900x400px|color=e71c1c]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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.
* 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:
* 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>
<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>

Threejs, Andreas

2020-04-14T15:45:32Z

Andreas-piksel.org: /* Sketchfab */

Threejs, Andreas

2020-04-14T15:42:53Z

Andreas-piksel.org: /* Sketchfab */

Threejs, Andreas

2020-04-14T15:38:47Z

Andreas-piksel.org: /* 3D Alloy Extension */

Threejs, Andreas

2020-04-14T15:38:34Z

Andreas-piksel.org: /* 3D Alloy Extension */

== 3D Alloy Extension ==
[[File:Cube.json|900x400px|color=e71c1c|norotate=1]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:38:23Z

Andreas-piksel.org: /* 3D Alloy Extension */

== 3D Alloy Extension ==
[[File:Cube.json|900x400px|color=e71c1c|norotate=0]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:38:05Z

Andreas-piksel.org: /* 3D Alloy Extension */

Threejs, Andreas

2020-04-14T15:36:53Z

Andreas-piksel.org: /* 3D Alloy Extension */

== 3D Alloy Extension ==
[[File:Cube.json|900x400px|color=#ea0e24|opacity=0.5|norotate=0]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:36:22Z

Andreas-piksel.org: /* 3D Alloy Extension */

== 3D Alloy Extension ==
[[File:Cube.json|900x400px|color=#0b9663|opacity=0.5|norotate=0]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:35:33Z

Andreas-piksel.org:

== 3D Alloy Extension ==
[[File:Cube.json|900x400px|color=0b9663|opacity=0.5|norotate=0]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:34:40Z

Andreas-piksel.org: /* 3D Alloy Extension */

== 3D Alloy Extension ==
[[File:Cube.json|900x400|color=0b9663|opacity=0.5|norotate=0]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:33:52Z

Andreas-piksel.org: /* 3D Alloy Extension */

== 3D Alloy Extension ==
[[File:Cube.json|900|400|color=0b9663|opacity=0.5|norotate=1]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:33:37Z

Andreas-piksel.org: /* 3D Alloy Extension */

== 3D Alloy Extension ==
[[File:Cube.json|900|400|color=0b9663|opacity=0.5|norotate=1|]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:33:19Z

Andreas-piksel.org: /* 3D Alloy Extension */

== 3D Alloy Extension ==
[[File:Cube.json|900px|400px|color=0b9663|opacity=0.5|norotate=1|]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:32:22Z

Andreas-piksel.org: /* 3D Alloy Extension */

== 3D Alloy Extension ==
[[File:Cube.json|600px|200px|color=e71c1c|opacity=0.5|norotate=1|]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:31:52Z

Andreas-piksel.org: /* 3D Alloy Extension */

== 3D Alloy Extension ==
[[File:Cube.json|900px|900px|color=e71c1c|opacity=0.5|norotate=1|]]

* Template for placing interactive 3d model on pages. Acceptable models formats are json, buff, obj, stl. Based on THREE.js v73 and Blender.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:30:39Z

Andreas-piksel.org: /* 3D Alloy Extension */

== 3D Alloy Extension ==
[[File:Cube.json|900x900|norotate=1|color=e71c1c|opacity=0.5|description=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.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:30:01Z

Andreas-piksel.org:

== 3D Alloy Extension ==
[[File:Cube.json|900|900|norotate=1|color=e71c1c|opacity=0.5|description=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.

<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}
</pre>

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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:26:07Z

Andreas-piksel.org: /* 3D Alloy Extension */

== 3D Alloy Extension ==
[[File:Cube.json|9000x900px|norotate=1|color=e71c1c|opacity=0.5|description=Cube-json|500x500px|norotate=1|color=e71c1c]]

* 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". 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 ==
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

<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>

Threejs, Andreas

2020-04-14T15:25:47Z

Andreas-piksel.org:

== 3D Alloy Extension ==
[[File:Cube.json|0x0px|norotate=1|color=e71c1c|opacity=0.5|description=Cube-json|500x500px|norotate=1|color=e71c1c]]

* 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". 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 ==
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

<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>