Question

Can anybody produce a clean “for dummies” example of HTML for using STLLoader.js to display ASCII (not binary) .stl object files in a web page? Result should let users manipulate object in current HTML5 browsers and with no fancy visuals beyond a grayscale object surface and background.

STLLoader.js might need the help of three.js or three.min.js but I wouldn’t know. STLLoader.js contains below usage example but did not include an HTML wrapper.

Usage example inside STLLoader.js

     /** 
     * Usage:
     *  var loader = new THREE.STLLoader();
     *  loader.addEventListener( 'load', function ( event ) {
     *
     *      var geometry = event.content;
     *      scene.add( new THREE.Mesh( geometry ) );
     *
     *  } );
     *  loader.load( './models/stl/slotted_disk.stl' );
     */

Answer 1

The three.js examples are a good source:

https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_stl.html

Here is the basic pattern to follow:

const loader = new THREE.STLLoader();

loader.load( 'slotted_disk.stl', function ( geometry ) {

    const material = new THREE.MeshPhongMaterial( { color: 0xff5533 } );

    const mesh = new THREE.Mesh( geometry, material );

    scene.add( mesh );

} );

three.js r161