CODEWITHSUNDEEP
3dwebglthree.js
ForumLeech
ForumLeech

Reputation: 467

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

Upvotes: 11

Views: 22107

Answers (1)

WestLangley
WestLangley

Reputation: 104763

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

Upvotes: 15

Related Questions