Threejs, Andreas

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

https://wiki.piksel.org/images/9/95/Sphere.json

• 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

1. Click "Upload a file" in the left navigation bar.
2. Select your file and upload it
3. Use the syntax below to include it in your page:

{{#3d:Model.json}}
{{#3d:Model.json|width}}
{{#3d:Model.json|width|height}}
...
{{#3d:Model.json|width|height|color|opacity|norotate|scale|z|style|class}}

Available parameters

• width - width of drawing area (canvas) in pixels. When set to "0", size is determined automatically. Default value - "200".
• height - height of drawing area in pixels. When set to "0", size is determined automatically. Default value - "200".
• color - color of model in hex format, 0xffffff. Default value - "0xff00ff". https://www.color-hex.com/
• opacity - decimal from 0.0 - full transparent to 1.0 - full opaque. Default value - "0.8".
• norotate - disables automatic model rotation if value is not empty. Use it for high polygonal models which consumes too much browser resources. Default value - "0".
• scale - model scale relative to drawing area size, in percent. Default value - "100"
• z - model z coordinate, a lift height over a grid, in pixel. Default value - "75"
• style - CSS style of drawing area. Default value - "".
• class - HTML class of drawing area. Default value - "".
• description - displays under model, by default is a link to model page. If value is set to "-", then description hides.

Export .json files

• Blender: https://www.electronicarmory.com/articles/exporting-blender-models-to-threejs-webgl/
• Rhino2Json: https://www.food4rhino.com/app/rhinotojson
• Autocad: https://forums.autodesk.com/t5/objectarx/how-to-export-json-file-from-autocad/td-p/7761446

Model control

• ←↑→↓ keys - rotating models.
• Double click, double tap - pause/play model rotation.
• Enter, Space keys - pause/play models rotation from all page.
• - and + keys - decreasing/increasing rotation speed.
• Home key - reset rotation angles to default values.
• Swipe, left mouse key hold and move - camera rotation.
• Right key hold and move - camera pan.
• Mouse wheel, hold wheel and move, pinch - zoom in/out.

Further Links

• 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

1. Create an account on https://sketchfab.com/
2. Upload your model: https://sketchfab.com/signup?next=%2Ffeed%23upload
3. Once a model is uploaded and ready, you can link to it: https://sketchfab.com/3d-models/kitchen-dining-set-4eeb76a3151f4de0a2fc08060c74cbbd
4. When you add /embed after the page link: https://sketchfab.com/3d-models/kitchen-dining-set-4eeb76a3151f4de0a2fc08060c74cbbd/embed
5. Integrate a model in a mediawiki page by adding the html-tag before and after:

• copy/ paste the embed code from your model site.

<html>
<div class="sketchfab-embed-wrapper">
    <iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/4eeb76a3151f4de0a2fc08060c74cbbd/embed?preload=1&ui_controls=1&ui_infos=1&ui_inspector=1&ui_stop=1&ui_watermark=1&ui_watermark_link=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
        <a href="https://sketchfab.com/3d-models/kitchen-dining-set-4eeb76a3151f4de0a2fc08060c74cbbd?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Kitchen Dining Set</a>
        by <a href="https://sketchfab.com/steelefrau?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Steele</a>
        on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
    </p>
</div>

</html>

Kitchen Dining Set by Steele on Sketchfab

• Another example:

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

Coffe table by Oldfarmer on Sketchfab

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

1. Create account on HUBS: https://hubs.mozilla.com/#/
2. Access SPOKE: https://hubs.mozilla.com/spoke/
3. Create your scene in SPOKE
4. 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