Multiple STL files on single web page using threeJS

Question

Here I have one STL file that I am displaying with threeJS. I don't know how to render multiple STL Files in single web page. Here's my code:

var container, camera, scene, renderer;

init();
animate();

function init() {

    container = document.getElementById('pratik');
    document.body.appendChild( container );

    // renderer
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 3, 0.5, 3 );
    scene.add( camera ); // required, because we are adding a light as a child of the camera

    // Controls
    controls = new THREE.OrbitControls( camera, renderer.domElement );

    // lights
    scene.add( new THREE.AmbientLight( 0x222222 ) );

    var light = new THREE.PointLight( 0xffffff, 0.8 );
    camera.add( light );

    // object

    var loader = new THREE.STLLoader();
    loader.load( 'files/wolf.stl', function ( geometry ) {

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

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

        scene.add( mesh );

    } );

    window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;

    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

    requestAnimationFrame( animate );

    render();

}

function render() {

    var timer = Date.now() * 0.0005;

    camera.position.x = Math.cos( timer ) * 15;
    camera.position.z = Math.sin( timer ) * 15;

    camera.lookAt( scene.position );

    renderer.render( scene, camera );

}

<div id="pratik"></div>

Now what if I need to include another file named 'mk6.stl', How will I do it? Does anyone knows how to do it? I have tried SketchFan, but its not made for me. Thank you.

nylki · Accepted Answer · 2018-07-23 15:40:53Z

2

You already have the code to load a single STL file and insert it into your scene. The next step to load multiple files is straightforward, you would simply reuse your STLLoader instance. Basically you could do something like:

var loader = new THREE.STLLoader();
loader.load( 'FIRSTFILE.stl', function ( geometry ) {
    var material = new THREE.MeshPhongMaterial( { color: 0xff5533 } );
    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
} );

loader.load( 'SECONDFILE.stl', function ( geometry ) {
    var material = new THREE.MeshPhongMaterial( { color: 0xff5533 } );
    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
} );

You could also use the loaders load() method in a loop if you have an array of URLs to load your STL-files from.

answered Jul 23, 2018 at 15:40

nylki

4996 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple STL files on single web page using threeJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related