STL (an abbreviation of "stereolithography") is a file format native to the stereolithography CAD software created by 3D Systems. STL has several backronyms such as "Standard Triangle Language" and "Standard Tessellation Language". This file format is supported by many other software packages; it is widely used for rapid prototyping, 3D printing and computer aided manufacturing. STL files describe only the surface geometry of a three-dimensional object without any representation of color, texture or other common CAD model attributes. The STL format specifies both ASCII and binary representations. Binary files are more common, since they are more compact.
An STL file describes a raw, unstructured triangulated surface by the unit normal and vertices (ordered by the right-hand rule) of the triangles using a three-dimensional Cartesian coordinate system. In the original specification, all STL coordinates were required to be positive numbers, but this restriction is no longer enforced and negative coordinates are commonly encountered in STL files today. STL files contain no scale information, and the units are arbitrary. For more information see: CAD Files (STEP, IGES, B-REP and STL)
Here's the code for the initial version, in roughly literate programming style.
Getting Started
First, include the three.js libraries that we'll be using. We'll need to get these from the three.js repository. We'll be using the STL Loader plugin, and the Orbit Controls plugin, so you can drag it around.
Here is the libraries that we will use:
<script src =
"/build/three.min.js"
></script>
<script src =
"/examples/js/loaders/STLLoader.js"
></script>
<script src =
"/examples/js/controls/OrbitControls.js"
></script>
We'll create a div for our viewer as well.
<div id =
"model"
style =
"width: 500px; height: 500px"
></div>
Setting up Three.js
Now we can actually start writing JavaScript. We'll be defining a simple function to act as the STL viewer, given the path to the STL file, and the ID of the element that it takes.
// Create a function to load the stl file
function STLViewer
(model, elementID)
{
var elem
= document.getElementById(
elementID );
};
Then, we create the camera using three.js. We use information about the element's size to determine the aspect ratio, and we use arguments 1 and 1000 to indicate that the camera should clip things closer than 1 unit away and further than 1000 units away.
var camera
= new
THREE.PerspectiveCamera
( 70,
elem.clientWidth / elem.clientHeight,
1,
1000 );
Now, we can create the renderer object. I set alpha to true, so that it would have no background, and just use the page's background. We also set the size of the renderer to the element's size, and add the renderer's object to our element with addChild.
var renderer
=
new
THREE.WebGLRenderer
({ antialias: true,
alpha: true });
renderer.setSize(
elem.clientWidth, elem.clientHeight );
elem.appendChild(
renderer. domElement );
We want it to be able to handle the page being resized, since this blog is designed to be responsive, so we add an event listener that resets the renderer's size as needed.
window.addEventListener(
'resize',
function ( ) {
renderer.setSize(
elem.clientWidth , elem.clientHeight );
camera..aspect
= elem.clientWidth / elem.clientHeight;
camera.updateProjectionMatrix();
}, false );
Next, we'll configure the controls using OrbitControls.
var controls
=
new
THREE.OrbitControls
(camera,
renderer.domElement);
controls.enableDamping
= true;
controls.rotateSpeed
= 0.05;
controls.dampingFactor
= 0.1;
controls.enableZoom
= true;
controls.autoRotate
= true;
controls.autoRotateSpeed
= 0.75;
Setting the Scene
Finally, we can start to set the scene. We'll start with some simple lighting − in this case, a hemisphere light from above. It won't light the bottom of the model, but it is easy enough to add additional lights here if that is an issue.
var scene
=
new
THREE.Scene();
scene.add(
new
THREE.HemisphereLight(
0xffffff, 1.5 ) );
Next, we can load our STL file using three.js's STL loader. The loader only returns a geometry, so we also need to generate a material for it − in this case, it is a somewhat shiny orange, since I like to 3D print in orange PLA.
var loader = new STLLoader();
var loader
=
new
THREE.STLLoader();
loader.load
(
model,
function (geometry) {
var material
=
new
THREE.MeshPhongMaterial
({
color: 0xff5533,
specular: 0x111111,
shininess: 100
});
var mesh
=
new
THREE.Mesh
(geometry, material);
});
Finishing Up
We can use our function to place the renderer in the div from earlier.
<script type =
"text/javascript"
>
window.onload
=
function ( ) {
STLViewer(
"model.stl", "modelId"
);
}
</script>
Demo
Project download stlviewer.zip