"Displaying a Variety of STL Files Simultaneously with ThreeJS on a Website

Question

"Displaying a Variety of STL Files Simultaneously with ThreeJS on a Website

Hello, I am currently working on displaying multiple STL files using threeJS in a web page. I have successfully displayed one file, but I am stuck on how to render more than one STL file on the same page. Below is my existing code:

var container, camera, scene, renderer;

init();
animate();

// Code continues...

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

I am looking for guidance on how to include another STL file named 'mk6.stl' in addition to the current file. If anyone has experience with this and can provide assistance, it would be greatly appreciated. I tried using SketchFan, but it did not meet my requirements. Thank you.

javascript three.js stl-format

Answer 1

Answer №1

If you've already managed to load a single STL file and integrate it into your scene, the process for loading multiple files is quite simple. You can just reuse your STLLoader instance as shown below:

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 );
} );

Alternatively, if you have an array of URLs containing the paths to your STL files, you can utilize a loop to iterate through them and use the loaders load() method.

Answer 2

If you've already managed to load a single STL file and integrate it into your scene, the process for loading multiple files is quite simple. You can just reuse your STLLoader instance as shown below:

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 );
} );

Alternatively, if you have an array of URLs containing the paths to your STL files, you can utilize a loop to iterate through them and use the loaders load() method.

"Displaying a Variety of STL Files Simultaneously with ThreeJS on a Website

Answer №1

Similar questions

Ways to maintain group settings for a Telerik MVC Grid connected to Ajax

Failed to input data into the database

Tips for comparing JSON object structures: contrasting an array of objects like [{},{},{}] with a single object like {k:v, k2:v2

What is the best way to create a slideshow using an IFrame?

Setting up a Babel configuration for a full-stack MERN application

Inquiries about ngshow and the scope concept

Encountering a "DOM Exception 11: InvalidStateError" when attempting to use websocket.send

What is the best way to merge values in an array based on their keys?

Is it possible to access a function on the main page from a plugin?

Why is my HTTP request callback not being executed?

Using input masking to restrict user input to only numbers and English alphabet characters

Order a portion of a JSON array according to another part of the same array

Is it possible to retrieve correctly formatted JSON data from this API?

How can I ensure that an item stays in place within a vertically sortable list using Dndkit? (I am also considering alternative drag-and-drop libraries)

Building a connection between a PostgreSQL database and implementing it with Node.js and React.js

Allow clicking through the iframe, while still able to interact with its contents

Using a TCP server to transfer and store files with node.js

Errors are being encountered when retrieving Shadow Shader Chunks

Is it possible to update the content page without having to refresh the master page?

Adding a context menu to a Leaflet map