Search code examples
3dwebglthree.js

Need .js and HTML example for displaying .STL 3D objects in a web page


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' );
     */

Solution

  • 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