Threejs, Andreas: Difference between revisions

From PikselProd
Jump to navigation Jump to search
No edit summary
Line 1: Line 1:
== 3D Alloy Extension ==
== 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]]
[[File:Cube.json|900x400px|color=e71c1c]]


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


=== How to use it: ===
# 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">
<pre class="wiki">
{{#3d:Model.json}}
{{#3d:Model.json}}
Line 13: Line 18:
</pre>
</pre>


Available parameters:
=== Available parameters: ===


* '''width''' - width of drawing area (canvas) in pixels. When set to "0", size is determined automatically. Default value - "200".
* '''width''' - width of drawing area (canvas) in pixels. When set to "0", size is determined automatically. Default value - "200".
Line 45: Line 50:


== Sketchfab ==
== Sketchfab ==
Sketchfab is a platform to publish, share, discover, buy and sell 3D, VR and AR content. It provides a viewer based on the WebGL and WebVR technologies that allows users to display 3D models on the web, to be viewed on any mobile browser, desktop browser or Virtual Reality headset. In addition to static 3D models, the viewer is able to play and control 3D animations. 3D models can be uploaded to Sketchfab from its website or directly from various 3D software, using plugins.


# Create an account on https://sketchfab.com/
# Create an account on https://sketchfab.com/
Line 77: Line 83:


</html>
</html>
== Mozilla SPOKE ==

Revision as of 16:03, 14 April 2020

3D Alloy Extension in Wiki

JavaScript Object Notation (JSON) is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value). https://wiki.piksel.org/images/f/f1/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.

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:


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.

  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

Mozilla SPOKE

Retrieved from "https://wiki.piksel.org/index.php?title=Threejs,_Andreas&oldid=7314"