Threejs, Andreas: Difference between revisions

From PikselProd
Jump to navigation Jump to search
Line 1: Line 1:
== Workshop overview ==
== Workshop overview ==
This workshop intro is split in 2 parts: an introduction to the tools:
This workshop intro is split in 2 parts.
 
1.) An introduction to the tools:
* 3D Alloy Extension in Wiki
* 3D Alloy Extension in Wiki
* Scatchfab
* Scetchfab
* Mozilla SPOKE
* 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 ==
== 3D Alloy Extension in Wiki ==

Revision as of 17:23, 14 April 2020

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

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

</html>

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

Further Links

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

Further Links