Threejs, Andreas: Difference between revisions

From PikselProd
Jump to navigation Jump to search
Line 54: Line 54:


<pre class="wiki">
<pre class="wiki">
'''<html>'''
<html>
<div class="sketchfab-embed-wrapper">
<div class="sketchfab-embed-wrapper">
     <iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/4eeb76a3151f4de0a2fc08060c74cbbd/embed?preload=1&amp;ui_controls=1&amp;ui_infos=1&amp;ui_inspector=1&amp;ui_stop=1&amp;ui_watermark=1&amp;ui_watermark_link=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
     <iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/4eeb76a3151f4de0a2fc08060c74cbbd/embed?preload=1&amp;ui_controls=1&amp;ui_infos=1&amp;ui_inspector=1&amp;ui_stop=1&amp;ui_watermark=1&amp;ui_watermark_link=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
Line 64: Line 64:
</div>
</div>


'''</html>'''
</html>
</pre>
</pre>
<html>
<html>

Revision as of 15:52, 14 April 2020

3D Alloy Extension

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

  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>