Stl Viewer Javascript Plugin

Intro

Download

Installation

Usage

Parameters

Methods

Events / Callbacks

License

Example

Javascript STL/OBJ 3D files Viewer

Download

Click to download Stl Viewer v1.04

Installation

Upload those files into your web server:
stl_viewer.min.js
parser.min.js
load_stl.min.js
webgl_detector.js
CanvasRenderer.js
OrbitControls.js
Projector.js
three.min.js

Usage

At the html page header / page body:
<script src="stl_viewer.min.js"></script>
At the page body, create an element to contain the Stl Viewer, and give it an ID:
<div id="stl_cont"></div>
Create a new instance of Stl Viewer (simplest initiation - read and view STL file called 'mystl.stl'):
var stl_viewer=new StlViewer(document.getElementById("stl_cont"), { models: [ {id:0, filename:"mystl.stl"} ] });
Working Example

copy

Optional parameters at initialization

var object_name = new StlViewer(html element container, [{[optional] init parameters}]);
object_nameoptional, holds instance of the created Stl Viewer
html element containerrequired, a reference to html element that will containt the Stl Viewer
[optional] init parameters all_loaded_callbackJavascript function to call after all 3D files were loaded (Default: null), See Events allow_drag_and_dropAllowing/not allowing user to drag and drop 3D files into viewer container (true/false; Default:false) auto_resizeSet camera to fit all 3D object in container (after all were loaded) (true/false; Default: true) auto_rotateAuto rotates camera if true (true/false; Default: false) mouse_zoomEnable mouse wheel zoom (true/false; Default: true) bgcolorBackground color for html container (String; Default: "transparent") cameraxCamera X axis position (Number; Default: 0) camerayCamera Y axis position (Number; Default: 0) canvas_widthWidth of the stl viewer (String represents css attribute; Default: "100%") canvas_heightHeight of the stl viewer (String represents css attribute; Default: "100%") load_three_filesLoad THREE.js lib files in the background (String represents relative path to files / or false to not load THREE js files ; Default: "" - assumes THREE js files are at the same folder as the page) loading_progress_callbackJavascript function to call during loading process (of one or more 3D files) (Default: null), See Events modelsArray of models to load (see here; Default:null) model_loaded_callbackJavascript function to call after (any) 3D file was loaded (Default: null), See Events on_model_dropJavascript function to call after 3D file was dropped into container (Default: null), See Events on_model_mousedownJavscript function to call after mouse button was down on a model (Default: null), See Events ready_callbackJavascript function to call after THREE.js files were loaded (Default: null), See Events zoomWhich zoom to use (relevant when auto_resize is set to false) (Number, -1 means auto zoom; Default: -1) center_modelsCenter model at the middle of parent element after loaded(true/false; Default: true)
Working Example

copy

'Models' parameter

Array of models to load: [{models to load parameters}, {...}, ...]
[optional] models to load parameters idA uniqe id to indentify the model (Positive number (-1 for auto id), Default: -1) filenameURL of file to load (String) local_fileUser chosen local file to load (HTML file input element) meshExisting mesh to add (THREE.js mesh object) xModel X-axis position (Number, Default: 0) yModel Y-axis position (Number, Default: 0) zModel Z-axis position (Number, Default: 0) displayModel shading to display (String: "flat" / "smooth"/ "wireframe", Default: "flat") colorModel color (String "#RRGGBB" represents RGB set, Default: "#909090") scaleScale factor for all axises (Positive number, Default: 1) scalexScale factor for X-axis (Positive number, Default: 1) scaleyScale factor for Y-axis (Positive number, Default: 1) scalezScale factor for Z-axis (Positive number, Default: 1) rotationxRotation on world X-axis (Number represents radians, Default: 0) rotationyRotation on world Y-axis (Number represents radians, Default: 0) rotationzRotation on world Z-axis (Number represents radians, Default: 0) opacityModel opacity (Number between 0 and 1, Default: 1) view_edgesAdd edges on model (true/false, Default: false) animationApply animation on model (see here; Default:null)
Working Example

copy

'Animation' parameter

Apply animation on model: {delta/exact:{animation parameters}}
[rqeuired] delta/exact deltaAdd (animation parameter's) values to current model position exactSet (animation parameter's) values of current model position
[optional] animation parameters msecAnimation time duration (how much time to animate?) (Number represents milliseconds, Default: 300) loopAnimation loop (relevant to 'delta' animation only) (true/false, Default: false) xX-axis end position (Number, Default: 0) yY-axis end position (Number, Default: 0) zZ-axis end position (Number, Default: 0) rotationxX-axis end rotation angle (Number represents radians, Default: 0) rotationyY-axis end rotation angle (Number represents radians, Default: 0) rotationzZ-axis end rotation angle (Number represents radians, Default: 0) scalexX-axis end scale factor (Positive number, Default: null) scaleyY-axis end scale factor (Positive number, Default: null) scalezZ-axis end scale factor (Positive number, Default: null) scaleEnd scale factor for all axises (Positive number, Default: null)
Working Example

copy

Methods

add_model (new_model)
Add a new model to scene (new_model: model data)
Example (load STL and give it id 1):
stl_viewer.add_model({id:1, filename:"knot.stl"});
add_models ([new_model, new_modelm ...])
Add multiple models to scene (new_model: array of model data)
Example (load two STLs and give them ids 1 and 2):
stl_viewer.add_models([{id:1, filename:"knot.stl"}, {id:2, filename:"bar.stl"}]);
remove_model (model_id)
Remove model from scene (model_id: Number)
Example (remove model with id 5):
stl_viewer.remove_model(5);
set_display (model_id, display)
Set model display/shading (model_id: Number; display:"flat"/"smooth"/"wireframe")
Example:
stl_viewer.set_display(2, "smooth");
set_color (model_id, color)
Set model color (model_id: Number; color:string "#RRGGBB" represents RGB set, or "transparent")
Example (set color of model id #2 to blue):
stl_viewer.set_color(2, "#0000FF");
set_opacity (model_id, opacity)
Set model opacity/transparency (model_id: Number; opacity:Number between 0 and 1)
Example:
stl_viewer.set_opacity(5, 0.5);
set_position (model_id, x,y,z)
Set model position (model_id: Number; x:x-axis position; y:y-axis position; z:z-axis position )
Example (set model #2 at position 100/100/100):
stl_viewer.set_position(2, 100, 100, 100);
set_scale (model_id, scalex, scaley, scalez)
Set model scaling/resizing factor (model_id: Number; scalex:x-axis scale factor; scaley:y-axis scale factor; scalez:z-axis scale factor)
Example (set model #7 twice as big):
stl_viewer.set_scale(7, 2);
set_edges (model_id, b)
Set edges around model? (model_id: Number; b:true/false)
Example (draw edges around model #5):
stl_viewer.set_edges(5, 2);
rotate (model_id, axis_x_angel, axis_y_angel, axis_z_angel)
Rotation of model (model_id: Number; axis_x_angel:Number represents radians around x-axis; axis_y_angel:radians around y-axis; axis_z_angel:Number represents radians around z-axis)
Example (rotate model #2 0.5 radias around x axis):
stl_viewer.rotate(2, 0.5, 0, 0);
animate_model (model_id, animation)
Set animation on model (model_id: Number; animation:animation data, null to remove animation)
Example (make model #1 move 100 pixels on y axis, in one second):
stl_viewer.animate_model(1, {delta:{y:100, msec:1000}} );
get_model_info (model_id)
Returns model info as object: model name, position, dimensions, rotation, display type, color, scale, volume, area and triangles count (model_id: Number)
Example (display model info as JSON string):
alert( JSON.stringify(stl_viewer.get_model_info(5)) );
get_model_mesh (model_id)
Returns THREE JS Mesh object (model_id: Number)
Example (save mesh of model 2 into variable):
var my_mesh = get_model_mesh (2);
set_bg_color (bg_color)
Set scene background color (bg_color: String "#RRGGBB" represents RGB set / 'transparent')
Example (set scene background yellow):
stl_viewer.set_bg_color("#FFFF00");
set_center_models (b)
Center models at the middle of parent element after loaded (b: true/false)
set_zoom (zoom_value)
Set screen zoom (zoom_value: Number / -1 for auto zoom)
set_auto_zoom()
Set screen auto zoom
set_auto_rotate (b)
Set screen auto rotation (b: true/false)
set_mouse_zoom (b)
Enable mouse wheel zoom (b: true/false)
Example (remove the ability to zoom with a mouse):
stl_viewer.set_mouse_zoom(false);
set_auto_resize (b)
Resize html container element with screen resize? (b: true/false)
clean ()
Removes all 3D models, clean scene
set_on_model_mousedown (callback)
Set 'onmousedown' listener (callback: Javascript function), See Events
Example (call function 'yeh_mouse_down' when any model was clicked):
stl_viewer.set_on_model_mousedown(yeh_mouse_down);
set_drag_and_drop (b)
Load 3D model by user's 'drag and drop' action (b: true/false)
Example (allow user to drag&drop model files into scene):
stl_viewer.set_drag_and_drop(true);

Events / Callbacks

ready_callback()
Called after THREE JS files were loaded
all_loaded_callback()
Called after all 3D files were loaded
loading_progress_callback(load_status, load_session)
Called multiple times during loading of 3D file(s) (load_status: array of loading models with two fileds: loaded, total; load_session: Number, represents current loading session) See example
model_loaded_callback(model_id)
Called after a model was loaded (model_id: Number, represents the model that was loaded)
on_model_drop(filename)
Called after 3D model was dragged and dropped to scene (and starts being loaded) (filename: String, 3D file name)
on_model_mousedown(model_id)
Called after mouse button was down on a 3D model (model_id: Number, represents the model that was clicked)

License

Copyright (c) 2018 Viewstl.com
  1. Permission is granted to download one copy of the materials (information or software) of Viewstl.com's Javascript Plugin for personal, non-commercial use only. This is the grant of a license, not a transfer of title, and under this license you may not:
    1. modify or copy the materials;
    2. remove any copyright or other proprietary notations from the materials; or
    3. transfer the materials to another person or "mirror" the materials on any other server.
  2. This license shall automatically terminate if you violate any of these restrictions and may be terminated by viewstl.com at any time. Upon terminating your viewing of these materials or upon the termination of this license, you must destroy any downloaded materials in your possession whether in electronic or printed format.
  3. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

Terms of use / Terms of service

See Viewstl.com terms of service
In short:

Live Preview

Click here for live preview