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
Clean Screen
Clean (or clear ...) and remove current model from scene:
document.getElementById('vs_iframe').contentWindow.postMessage({msg_type:'clean'}, '*');