The art of loading STL files in Three.js

Attempting to load an stl file by tweaking the function load of the loader URL in this particular example:

However, despite the loading process and subsequent rotation of the scene after a while, visualization seems impossible. Upon checking the mesh details in the console, it's evident that the mesh exists with proper geometry, yet remains invisible.

The original STL file is quite large at 28.2 MB and originates from CATIA V5 software.

Interestingly enough, the same STL file can be successfully loaded in a free online viewer using three.js:

One thing I noticed is that the online viewer does not utilize the STLLoader.js as used in the provided example.

javascriptthree.js3d

Answer №1

Here is the code snippet that accomplishes that task:

let objLoader = new THREE.STLLoader();
objLoader.load( 'MY-STL.stl', function ( geometry ) {
    let material = new THREE.MeshPhongMaterial( {
        ambient: 0xff5533, 
        color: 0xff5533, 
        specular: 0x111111,
        shininess: 200 
    });                                                  
    let mesh = new THREE.Mesh( geometry, material );

    scene.add( mesh );
});

It's important to remember to define the material and properly use it in order for this to work correctly.

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

The pdf generation feature of pdf-creator-node in Linux seems to be malfunctioning

An error occurred with code EPIPE at afterWriteDispatched (internal/stream_base_commons.js:154:25) at writeGeneric (internal/stream_base_commons.js:145:3) at Socket._writeGeneric (net.js:784:11) at Socket._write (net.js:796:8) ...

javascriptnode.jshtml-pdf

Discovering the Secrets of Accessing and Modifying Item Values in BIRT

Is it feasible to create using only Javascript without utilizing any Java functions? Is there a way to access values from elements like labels, tables, or charts by calling them from an HTML button? I am currently working with Openlayers and BIRT. I need ...

javascripthtmlbirt

When moving the cursor quickly, a vertical line does not appear upon hover

I am facing an issue with the vue-chartJs library. When I move the cursor fast, the vertical line on hover does not show up. However, when I move the cursor slowly, it works perfectly. Can anyone offer assistance in solving this problem? onHover: functi ...

javascriptvue.jschart.js

Re-enable the jQuery-ui sortable feature after it has been turned off

Here is a snippet of my jQuery code: var status = true; $('#edit').click(function () { if (status) { $('table tbody').sortable({ axis: 'y', update: function (event, ui) { va ...

javascriptjqueryjquery-uijquery-ui-sortablesortables

Enable next-i18next to handle internationalization, export all pages with next export, and ensure that 404 error pages are displayed on non-generated pages

After carefully following the guidelines provided by i18next/next-i18next for setting up i18n and then referring to the steps outlined in this blog post on locize on how to export static sites using next export, I have managed to successfully generate loca ...

javascriptnext.jsvercelnext-i18next

Implement custom styles using media queries within ngView to ensure compatibility with IE browsers even after a page

Experiencing issues with CSS rules in IE10 when included in a page via ngView (using Angular 1.0.6). Works fine in other browsers (potentially IE11, not personally confirmed): Here is the CSS code: .checker { display: none; } @media (min-width: 1041 ...

javascriptcssangularjsinternet-explorer-10

step-by-step guide to replacing an item in an array using javascript

I am working with some HTML codes : <p class="Chords">[A] [B] [C]</p> <p> Some Text Goes Here </p> <p class="Chords">[D] [E] [F]</p> <p> Some Text Goes Here </p> <p class="Chords">[G] ...

javascriptjquery

Display loading animation until Google Maps is fully loaded - Utilizing AngularJs

Is there a way to check the readiness of Google Maps before displaying it? I'd like to show a preloader block while the Google Maps is loading. Here is the factory code I am using: var map = false; var myLatlng = new google.maps.LatLng(48.6908333333 ...

javascriptangularjsgoogle-maps

Troubleshooting: Vue Component Unable to Locate Property

Just dipping my toes into Vue with a simple test implementation and running into some trouble breaking down data into components. Let's take a closer look at the code: <body> <header id="main-header"> <custom-header></ ...

javascriptwebpackvue.js

Move the div from side to side when clicked

My mobile navigation bar currently has overflow, requiring users to scroll left or right to see all the choices. I want to implement buttons with arrows that will automatically slide the navigation bar to the desired direction when clicked. I have attempt ...

javascriptjqueryhtmlcss

Inaccurate window dimensions on iOS Chrome are causing issues with innerWidth and inner

After rotating my iOS device, Google Chrome version 104 seems to be reporting incorrect values for window.innerWidth and window.innerHeight. The discrepancy is noticeable when comparing the dimensions before and after rotation: Initially in portrait mode: ...

javascriptgoogle-chromechrome-ios

Several dropdowns causing issues with jQuery and Bootstrap functionality

Can anyone help me identify where I might be making a mistake? The issue is with my fee calculator that increments fees as the user progresses through the form. In this scenario, there is a checkbox that, when clicked, is supposed to display a div showing ...

javascriptjquery

What is the purpose of using the variable "header_row || 1" in App Script?

Recently, I stumbled upon a spreadsheet that contains app script for gathering keys of data requested through doGet. In the code, there is a line that reads like this: var headRow = e.parameter.header_row || 1; What exactly does this line mean? I searc ...

javascriptgoogle-apps-script

How can I trigger a series of functions in sequence when a button is clicked using Vue.js?

When I click, I need to call 3 functions in a specific order: <CButton @click=" getBillPrice(); updateBill(); postData();" type="submit" color="primary">Save</CButton> However, the func ...

javascriptvue.jspromise

Using javascript and d3.js to display a set number of items on each line through printing

I'm currently working on a project that involves printing a specific number of rectangles per line using d3.js var rectangle = svgContainer.selectAll("rect").data(data).enter().append("rect") .attr("x", function(d,i){ return i*5}) ...

javascripthtmlcssd3.js

What is the method for linking to another page ID using an <a href> tag?

On one of my pages, I have a section that references another page's div id to trigger a click event for editing specific form fields. This is the profile page: <a href="<?php echo base_url('settings_pro/edit'); ?>" name="pull-righ ...

javascriptphpjquerymysqlcodeigniter

Attempting to develop a next.js web application using Vercel has hit a roadblock for me. Upon running the "vercel dev" command in the terminal, an error message is

vercel dev Vercel CLI 28.5.3 > Creating initial build node:events:491 throw er; // Unhandled 'error' event ^ Error: spawn cmd.exe ENOENT at ChildProcess._handle.onexit (node:internal/child_process:285:19) at onErrorNT (nod ...

javascriptnode.jsreactjsnext.jsvercel

Steps to retrieve hexadecimal addresses sequentially

Can anyone recommend a module or script that can generate sequential 64-bit hex addresses like the following: 0000000000000000000000000000000000000000000000000000000000000000 0000000000000000000000000000000000000000000000000000000000000001 00000000000 ...

javascriptnode.jsnpm

I love the idea of the music playing on as I navigate between pages or tabs. Such a cool feature with Next

I'm looking to implement a music player within my next.js application. How can I ensure that the currently playing track doesn't stop when switching between pages? Essentially, I want the music playback to continue seamlessly as users navigate th ...

javascriptreactjstypescriptnext.jsfrontend

Understanding how to determine the percentage change when the state changes in React hooks

I am currently in the following state: const [data, setData] = useState({maths:null, physics:null, chem:null, percentage:null}) I have been updating the state as follows: setData({...data, [e.target.name]: e.target.value}) My function for calculating the ...

javascriptreactjsreact-hooks