Threejs, Andreas: Difference between revisions

From PikselProd
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
#3D Alloy Extension
== '3D Alloy Extension' ==
* https://www.mediawiki.org/wiki/Extension:3DAlloy
* https://www.mediawiki.org/wiki/Extension:3DAlloy
[[File:Cube.json|500x500px|norotate=1|color=e71c1c]]
[[File:Cube.json|500x500px|norotate=1|color=e71c1c]]
Line 21: Line 21:




# '''Export .json files:'''
=== Export .json files: ===
* Blender: https://www.electronicarmory.com/articles/exporting-blender-models-to-threejs-webgl/
* Blender: https://www.electronicarmory.com/articles/exporting-blender-models-to-threejs-webgl/
* Rhino2Json: https://www.food4rhino.com/app/rhinotojson
* Rhino2Json: https://www.food4rhino.com/app/rhinotojson
Line 27: Line 27:




Model control:
=== Model control: ===


* ←↑→↓ keys - rotating models.
* ←↑→↓ keys - rotating models.
Line 38: Line 38:
* Mouse wheel, hold wheel and move, pinch - zoom in/out.
* Mouse wheel, hold wheel and move, pinch - zoom in/out.


# Video:
=== Video: ===
* https://www.youtube.com/watch?v=Tkqok5hQTYU
* https://www.youtube.com/watch?v=Tkqok5hQTYU


# Sketchfab
== Sketchfab ==
Using Sketchfab link to page:
Using Sketchfab link to page:



Revision as of 09:00, 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.


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.

Video:

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