Welcome to the free online STL viewer!
View 3D STL files directly in your browser - no software installation is required.
We upload nothing to our server - everything is done client side.
* NEW - Stand Alone Javascript Plugin

Communicate with / alter model at runtime
When Viewstl is embedded in your site, you can still control it (replace model, set color, set display mode etc.) and get info (volume, size, etc.) - here is how:

Prerequisites

1. Some knownledge in Javascript, as the communication is done only through Javascript commands.
2. Giving an id to the Viewstl's Iframe. At the generated code the default id is "vs_iframe" - we'll use this id at the code snippets below.
3. you have to make sure the Iframe is fully loaded before sending it messages. You can do something like this:

document.getElementById('vs_iframe').onload=function() { //... your code here ... }

Get model info

Use the code below in order to get model info - name, volume, size and color:

document.getElementById('vs_iframe').contentWindow.postMessage({msg_type:'get_info'}, '*');

* Please notice - you have to make sure the Iframe is fully loaded before sending it messages (see above)!
Ths code above only sends a message to the Iframe. In order to get the actual info - we need to listen for its answer ... this is how:

window.onmessage = function(e) { if ((e.origin=="https://www.viewstl.com")&&(e.data.msg_type)) { if (e.data.msg_type=='info') { alert("Model filename: "+e.data.filename); alert("Volume: "+e.data.volume); alert("Color: "+e.data.color); alert("x: "+e.data.x); alert("y: "+e.data.y); alert("z: "+e.data.z); alert("triangles: "+e.data.triangles); alert("area: "+e.data.area); } } };

As you can see, the returned value is an object with 9 fields:
msg_type: a string represents the type of message, should be 'info' in our case
Filename: The model's filename
Volume: The model's volume (in mm^3 or in^3, depends on file's units)
Area: The model's surface's area (in mm^2 or in^2, depends on file's units)
Triangles: The model's number of triangles (or faces)
x / y / z: The model's dimensions (in mm or in, depends on file's units)
Color: The model's color (RGB string value)
* Optional - you can also send a string to the iframe that will be returned with the message as 'tag' field:

document.getElementById('vs_iframe').contentWindow.postMessage({msg_type:'get_info', tag:'some string'}, '*');

Set model color

Use the code below in order to to set the color of the model:

document.getElementById('vs_iframe').contentWindow.postMessage({msg_type:'set_color', value:'<your color here>'}, '*');

Replace '<your color here>' with one of the values: black, white, blue, green, red, yellow, gray, azure, pink, purple, darkblue, brown
You can also assign a custom value by the pattern: #RRGGBB - replace "RR" with an hexadecimal value for red, "GG" - value for green, "BB" - value for blue.
example: "#FFA500" will result in an orange color.

Set background color

Use the code below in order to to set the background color of Viewstl's iframe:

document.getElementById('vs_iframe').contentWindow.postMessage({msg_type:'set_bgcolor', value:'<your color here>'}, '*');

Replace '<your color here>' with one of the values: black, white, blue, green, red, yellow, gray, azure, pink, purple, darkblue, brown, transparent
You can also assign a custom value by the pattern: #RRGGBB

Set model shading

Use the code below in order to to set the model shading:

document.getElementById('vs_iframe').contentWindow.postMessage({msg_type:'set_shading', type:'<your shading here>'}, '*');

Replace '<your shading here>' with one of the values: flat, smooth, wireframe

Set model orientation

Use the code below in order to to set the model orientation:

document.getElementById('vs_iframe').contentWindow.postMessage({msg_type:'set_orientation', value:'<your orientation here>'}, '*');

Replace '<your orientation here>' with one of the values: front, back, left, right, top, bottom

Set model edges

Use the code below in order to to set/unset line edges for the model:

document.getElementById('vs_iframe').contentWindow.postMessage({msg_type:'set_edges', value:'<your value here>'}, '*');

Replace '<your value here>' with one of the values: yes, no

Get model snapshot(picture)

Use the code below in order to get a photo/snapshot of the model:

document.getElementById('vs_iframe').contentWindow.postMessage({msg_type:'get_photo'}, '*');

* Please notice - you have to make sure the Iframe is fully loaded before sending it messages (see above)!
Ths code above only sends a message to the Iframe. In order to get the actual info - we need to listen for its answer ... this is how:

window.onmessage = function(e) { if ((e.origin=="https://www.viewstl.com")&&(e.data.msg_type)) { if (e.data.msg_type=='photo') { var model_img = document.createElement("img"); model_img.src = e.data.img_data; document.body.appendChild(model_img); } } };

As you can see, the returned value is an object with 2 fields:
msg_type: a string represents the type of message, should be 'photo' in our case
img_data: a base64 coded image data (case use it as 'src' of an img element)
* Optional - you can also send a string to the iframe that will be returned with the message as 'tag' field:

document.getElementById('vs_iframe').contentWindow.postMessage({msg_type:'get_photo', tag:'some string'}, '*');

Load model by URL

Use the code below in order to load (or re-load) model from an Internet address (URL):

document.getElementById('vs_iframe').contentWindow.postMessage({msg_type:'load', url:'<your url here>'}, '*');

Replace '<your url here>' with a valid URL

Load model by Local URL

Use the code below in order to load (or re-load) model from an Intra-net address (URL which is not accessible to the internet):

document.getElementById('vs_iframe').contentWindow.postMessage({msg_type:'load', local_url:'<your local url here>'}, '*');

Replace '<your local url here>' with a valid URL
* Please read here for further instructions about viewing local URL files

Load model from a local file

You can read a model file from the user's local computer. However, for security reasons, it is impossible for you to determine which file to load.
- You must first present the user with a file browsing dialog (or file dragging ability), and only then, send the file to Viewstl.com Iframe
Example for file browsing button (HTML code):

<input type="file" value="internal file" id="fileselect" onchange="load_local_file(this.files[0]);">

The Javascript code:

function load_local_file(f) { document.getElementById('vs_iframe').contentWindow.postMessage({msg_type:'load', file:f}, '*'); }

* this option does not work in FireFox