CODEWITHSUNDEEP
javascriptthree.jsstl-format
Jim Kasprowicz
Jim Kasprowicz

Reputation: 29

Multiple STL files on single web page using threeJS

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.

Upvotes: 0

Views: 1558

Answers (1)

nylki
nylki

Reputation: 504

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.

Upvotes: 2

Related Questions