Stl Viewer Javascript Plugin- Docs

Javascript STL/OBJ 3D files Viewer

Reads binary/ASCII STL files; OBJ files
Supports multiple 3D files at the same container
Set model's size, position, color, rotation and some basic animation
Supports user's drag&drop
Model click events
Model information (size, volume, surface area etc.)
Add existing meshes into scene
Supports WebGL - falls back to HTML5 Canvas
Pure JavaScript - Uses THREE.js library, no server side script is needed
Can load THREE.js lib files in the background - no need to deal with THREE JS at all
Supports multiple Stl Viewer instances at the same page
Easy usage - as much as one line of Javscript code
Stand alone code - independent of external services/websites (aka Viewstl.com)

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
TrackballControls.js
Projector.js
three.min.js

At the html page header / page body:

At the page body, create an element to contain the Stl Viewer, and give it an ID:

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

var object_name = new StlViewer(html element container, [{[optional] init parameters}]);

object_name	optional, holds instance of the created Stl Viewer
html element container	required, 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) controlsCamera control type (0=OrbitControls, 1=TrackballControls; Default: 0)

Working Example

copy

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)

Working Example

copy

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

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

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, true);

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 (get mesh of model 2):

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);

get_camera_state ()

Returns camera state as Javscript object {position, up, target}

Example:

var camera_state = stl_viewer.get_camera_state();

set_camera_state ()

Set camera state by Javscript object ({position, up, target}) - potision/up/taraget are x/y/z vectors

Example:

stl_viewer.set_camera_state(camera_state);

Working Example

copy

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

Working Example

copy

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)

get_stl_bin (model_id)

Returns STL formatted model as arraybuffer (model_id: Number)

Example:

var model_binary_data = stl_viewer.get_stl_bin(0);

download_model (model_id[, filename])

download model as STL file (model_id: Number; filename: name of the file (optional), default: model's original filename)

Example:

stl_viewer.download_model(0, 'my_model.stl');

get_vsj (as_js_obj)

Returns current scene status as Javscript object or JSON string, contains models info, container properties; doesn't contain events and model's binary data (as_js_obj: true/false; Default:false; if true: returns Javscript Object, if false - returns JSON string)

Example:

var scene_status = stl_viewer.get_vsj();

Result (assuming one model named bar.stl in scene):

{"canvas_height":"100%","bg_color":"transparent","camera_state":{"position":{"x":0,"y":0,"z":74.39999999999999},"up":{"x":0,"y":1,"z":0},"target":{"x":0,"y":0,"z":0}},"auto_rotate":false,"mouse_zoom":true,"auto_resize":true,"center_models":true,"models":[{"id":0,"filename":"some_model.stl","display":"flat","color":"#F0F0F0"}]}

download_vsj (filename)

Download a json/text file with current scene status (filename: name of the file (optional), default: 1.vsj)

Example:

stl_viewer.download_vsj('my_scene.vsj');

load_vsj (filename)

Load scene from vsj - ViewStl JSON file (filename: URL of vsj file | HTML file object)

Example:

stl_viewer.load_vsj('my_scene.vsj');

get_vsb ()

Returns current scene status as Javscript object, INCLUDING model's binary data (means: you don't need to keep the original STL files or anything else besides this vsb file)

Example:

var vsb = stl_viewer.get_vsb();

Result:

Object {vsj: Object (see get_vsj), files: array of models {id: number, bin: ArrayBuffer}}

download_vsb (filename)

Download current scene as vsb file - ViewStl Binary (filename: name of the file (optional), default: 1.vsb)

(you don't need to keep the original STL files or anything else besides this vsb file)

Dependency: JSZip (library not included in Viewstl plugin, you must load it within your page)

Example:

stl_viewer.download_vsb('my_scene.vsb');

Result: my_scene.vsb: a ZIP compressed file, contains json.data.vsj (see get_vsj), and models as STL files

load_vsb (filename)

Load scene from vsb - ViewStl Binary file (filename: URL of vsb file | HTML file object)

Dependency: JSZip (library not included in Viewstl plugin, you must load it within your page)

Example:

stl_viewer.load_vsj('my_scene.vsb');

Working Example

copy

See Viewstl.com terms of service

Click here for live preview

Stl Viewer Javascript Plugin

Intro

Download

Installation

Usage

Parameters

Methods

Events / Callbacks

Save/Load Methods

License

Example

Download

Installation

Usage

Optional parameters at initialization

'Models' parameter

'Animation' parameter

Methods

Events / Callbacks

Save/Load Methods

License

Terms of use / Terms of service

Live Preview