Want to be notified of new releases in tamarintech/model-viewer?
Project currently paused (September 30th, 2015) while work is completed to add AMF loading to three.js. The current release branch is stable if you wish to use this project in your work.
This is a Polymer based project to provide a basic model viewer for websites that want to display models intended for 3D printing. The model is displayed using three.js and the loader currently supports STL, three.js JSON and Protocol Buffer encoded models.
In addition to basic viewer functionality you can scale, rotate and export an object directly from the viewer into an STL file.
To use protocol buffers you will need to compile your model appropriately and provide a matching proto file. An encoded model is significantly more efficient than a generic STL - most STLs have up to an 80% reduction (from 5M binary STL to 1M encoded json).
This is a Polymer based project and uses web components. You will probably not be able to simply load index.html in your favorite browser - the components won't load. You will need to serve the demo from a web server. This is common for Polymer elements and demos.
You should then be able to browse to localhost:8000 (or similar) to view the included demo.
Navigate to your project's directory that holds static files or create a new empty directory to view the demo.
model-viewer is the core component for displaying a model.
model-viewer-container is an example container to get up and running with displaying models quickly.
The view is flipped as Z is up in the viewport to match the orientation of printers - be aware of this if you add meshes that were not originally designed for printing as they will render "face down".
Core component for displaying and interacting with the view of the model.
Place holder used before the model is loaded.
The actual model. This should be the json, STL or pb file.
The name of the model for displaying to the user.
How the model should be loaded. Currently stl or json or protobuf.
Location of the proto file used to generate the protobuf version of the model if using protocol buffers.
Light settings. lightintensity should be a float from 0 to 1.0. All other settings should be hexidecimal.
Render the solid geometry of the object.
Render the wireframe for the object.
Example container to get you started. Note that sections that are built as templates are not machine readable - for example, the licensing section includes RDFa but, as part of a Polymer template, is not indexable or searchable on the web and is only provided for end-user informational purposes. This elements wraps the model-viewer element. See index.html for an example.
The title of the model.
A string representing the author.
A JSON array of images to be displayed below the render view.
The alt text for the image.
The image used in the viewer dialog. Should be a higher quality than srcsm.
The small image that appears below the viewer.
A preview image used before the model is loaded.
URL the user can use to download the model.
An optional object representing a Creative Commons license for the model.
Version numbers and dates are currently not supported.
A URL to the preferred source of the model.
Version 0.0.4: A toolbar button has been added for taking pictures of the rendered scene.
Prior to version 0.0.4: For convenience, a data URI is generated from the scene and appended to the renderer instance. You can access this data via dev tools, or your instance with something similar to the example below.
Note that this is only available after the scene has been rendered (immediately after the 3D View button is clicked) and is updated after each scene update.
0.0.5: You can now rotate, scale and export an STL directly from the viewer.
0.0.4: More user configurable options - light color, intensity, ambient color. New layout for viewer controls. Various code fixes. Utility.js added for early testing of new features.
[Complete] Should include an export button to allow the user to export geometry.