Instructions for uploading STL files in HTML with three.js

My current project involves creating a web application that allows users to upload and view STL files generated by MATLAB code. However, I'm encountering difficulties when it comes to passing parameters in the STL load function.

As I searched for solutions, I came across a helpful thread on user uploaded textures in three.js which I attempted to follow.

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').html( e.target.result);
            console.log(e.target.result);
            var loader = new THREE.STLLoader();
            loader.load(e.target.result) , function (    geometry ) {
                var material = new THREE.MeshPhongMaterial( { color:   0xff5533, specular: 0x111111, shininess: 200 } );
                var mesh = new THREE.Mesh( geometry, material );
                mesh.position.set( 0, - 0.25, 0.6 );
                mesh.rotation.set( 0, - Math.PI / 2, 0 );
                mesh.scale.set( 0.005, 0.005, 0.005 );
                mesh.castShadow = true;
                mesh.receiveShadow = true;
                scene.add( mesh );
            } );

        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function () {
    readURL(this);
});

I am hopeful that the STL model will be successfully rendered on the web app.

Answer №1

If you need to process the geometry of an STL file using the STLLoader, you can utilize the parse function. This function can take the file contents as an Array Buffer and return the processed geometry. To retrieve the contents of the file, you can make use of FileReader.readAsArrayBuffer.

if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {

        var geometry = loader.parse(e.target.result);
        var mesh = new THREE.Mesh( geometry, material );

        // ...

        scene.add(mesh);
    }
    reader.readAsArrayBuffer(input.files[0]);
}

Feel free to give this a try and let me know how it works out for you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to use the res.send() function

I've been working on a Node.js project. Within the validate.js file, I have defined a class Validate with a static method validateTicket and exported the class at the end. validate.js file const request = require("request"); const config = { urlBas ...

Dealing with errors and fetching them within a react application using the useState hook

As a newcomer to React, I am currently working with a backend API in my project. One issue I encountered involves the "Login Page" functionality. When a user enters an incorrect username or password and submits the form, the API responds with a message sta ...

Exploring the features of React.js version 16

I'm confused about what {...props} does. I know it makes passing props easier, but what happens if there are no props to begin with? Take this example: const input = (props) => { let inputElement = null; switch(props.inputtype) { ...

A guide to gathering a variety of data types for an array in Node.js

As a JavaScript beginner, I am on a mission to enhance my skills by solving online judge problems. However, I have hit a roadblock with a specific issue. The problem requires me to take input from the user in the form of an integer and a string in one go, ...

Seeking the perfect message to display upon clicking an object with Protractor

Currently, I am using Protractor 5.1.1 along with Chromedriver 2.27. My goal is to make the script wait until the message "Scheduling complete" appears after clicking on the schedule button. Despite trying various codes (including the commented out code), ...

"Interactive jQuery feature allows users to edit table content live with the ability to update and delete data via

I am working on implementing live editing, updating, and deleting functionality in a table using jQuery. However, I have encountered two problems: When clicking the pen icon from order #3 to #1, it requires 3 clicks, but when clicking from order #1 to ...

Attempting to transpile JavaScript or TypeScript files for compatibility within a Node environment

Our node environment requires that our JavaScript files undergo Babel processing. Figuring out how to handle this has been manageable. The challenge lies in the fact that we have a mix of file types including .js, .jsx, .ts, and .tsx, which is not subject ...

Having trouble with Mongoose's findOne method not functioning as expected

I am developing an application where users can input data such as the number of hours they slept and their eating habits. This information is then stored in a collection known as the Journal. When a user clicks on "stats", it activates a function called f ...

The altered variable refuses to show up

Currently, I am working on a project to create a Skate Dice program that will select random numbers and display the results simultaneously. Unfortunately, I have encountered an issue where the randomly generated number is not being shown; instead, it dis ...

The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

I am encountering a similar issue as described in this thread: same problem (fiddle: original fiddle). However, I am still learning JavaScript and struggling to apply the solution provided because my HTML code is slightly different. Can someone please assi ...

Is it possible to use Jade for server-side Node.js development?

Is there a way to include server-side Node.js code (like the example below) in a Jade file or other template engines (or without using template engines)? extends layout block content p Welcome to #{title} <!-- Here is some Node.js program that r ...

Avoiding flickering when the browser back button is clickedAvoiding the flickering effect

As I work on developing an Asp.Net application, a challenge has arisen. In order to prevent users from navigating back to the login page after logging in, I have implemented JavaScript code successfully. However, when clicking the browser's back butto ...

Use map.fitBounds in MapBox to continuously adjust the map view to show only the visible features on the map

In my map, there are various features with IDs stored in an array called featureIds. Within my application, I have a button that can toggle the visibility of certain features. To address this toggling behavior, I am developing a JavaScript function named ...

Ways to bypass HostListener in Angular 2

In the process of developing a page with animations triggered on scroll, I encountered the challenge of ensuring that the animations only occur when the corresponding element is visible on the viewport. Utilizing Angular2 for this task led me to investigat ...

Define the format for the output file name in TypeScript

I am trying to change the filename of a TypeScript generated js file. How can I accomplish this? For instance, I currently have MyCompany.ClassA.ts The default output filename is MyCompany.ClassA.js However, I would like the output filename to be MyComp ...

Using Three.js to showcase 3 different slices of heatmaps within a 3D environment

I'm working on using Three.js to create a 3D representation of a matrix. Each 2D plane in the matrix should be displayed as a 2D heatmap. Here is an example of what I'm aiming for: https://i.sstatic.net/Kj5yb.png My current obstacle is figuring ...

Validate the error value of the confirmation message box

I wrote a script to create a confirmation popup window. However, when I implement it in our aspx.cs page, it seems to be returning incorrect values. Here is my script: <script type="text/javascript"> function Confirm() { var confirm_value = docu ...

Error in delete operation due to CORS in Flask API

After successfully developing a rest api in Flask and testing all api endpoints with Postman, I encountered an issue while working on an application in Javascript that consumes the resources of my api. The problem lies in consuming an endpoint that uses t ...

Unusual hue in the backdrop of a daisyui modal

https://i.stack.imgur.com/fLQdY.png I have tried various methods, but I am unable to get rid of the strange color in the background of the Modal. Just for reference, I am using Tailwind CSS with Daisy UI on Next.JS. <> <button className='btn ...

Refine the inventory by using data-price attributes to narrow down the product selection

While I have successfully implemented the filtering of the product list based on store and brand in my code, I am facing challenges in filtering it with price range. <div id="prod"> <div class="content" data-brand="Andrew" data-price="1000" d ...