Issue encountered when attempting to load an STL file in three.js

I'm attempting to display a preview of an STL file using three.js. I came across a tutorial that seems to provide exactly what I need:

Tutorial

However, when I try to implement the code, I keep running into an error message saying 

undefined is not a function (near '...loader.addEventListener...')
at the following line:

    var loader=new THREE.STLLoader();
    loader.addEventListener('load', function (event){
    var geometry=event.content;
    var material=new THREE.MeshLambertMaterial({ ambient: 0xFBB917,color: 0xfdd017 });
    var mesh=new THREE.Mesh(geometry, material);
    scene.add(mesh);});

I've double-checked that all the necessary files are included, but I can't seem to figure out what's wrong with my code. Is there an alternative approach I can take to achieve a simple preview of an STL file using javascript?

javascriptthree.js

Answer №1

The tutorial seems to have been created using an older version of three.js. In newer versions, when you want to load STL (or other model formats), you need to utilize the .load function:

var material = new THREE.MeshLambertMaterial({ ambient: 0xFBB917,color: 0xfdd017 });

var loader = new THREE.STLLoader();
loader.load( './models/stl/slotted_disk.stl', function ( geometry ) {
  scene.add( new THREE.Mesh( geometry, material ) );
});

STLLoader.js:L18-30

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

Creating a Javascript Regular Expression to detect both accented and non-accented variations of a given string

Is there a way to use regular expressions in JavaScript to match both accented and non-accented versions of a string? I am customizing jQuery-ui's autocomplete feature by adding bold HTML tags around words in the suggestions. Here is my code snippet: ...

javascriptjqueryregex

Learn the process of automatically copying SMS message codes to input fields in Angular17

After receiving the first answer, I made some changes to the code. However, when testing it with Angular, I encountered several errors. How can I resolve these issues? TS: async otpRequest() { if ('OTPCredential' in window) { const ab ...

javascripthtmlangularangular-material

Endless cycle of React hooks

I am struggling to understand why I keep encountering an infinite loop in my useClick function. I can see that I am updating the state value inside the useEffect using setVal, but according to the second parameter, useEffect should only run on onClick as ...

javascriptreactjsreact-hooks

Use an EditText to capture user input, then pass the variables to a Webview by executing a javascript command

I'm currently working on a basic web application that aims to streamline the user experience by eliminating the need for repeated credential input upon website access (without saving passwords). After some exploration, I was able to identify and manip ...

javascriptandroidvariableswebview

Texture loaded onto a surface may appear blurry or even just one uniform color. Discover how to enhance the sharpness and clarity of the

I am currently experimenting with three.js to create some simple 3D graphics. One of the tasks I am working on involves applying a jpeg image as a texture onto a custom geometry. Here is the code snippet showcasing this: var floor = new THREE.Shape([ ...

three.jstextures

What could be causing my search function to not recognize special characters?

It seems like there might be an issue with character encoding. My JavaScript search function is unable to identify specific strings that contain certain special characters such as parentheses, asterisks, and numbers. The JavaScript code I am using is quit ...

javascriptphpstringencodingutf-8

Ways to stop the react-router from causing the page to refresh

Need assistance with React Router issue I'm working on a project in reactJs using react-router-dom v5. I have set up a default route for routing. <Redirect to={"someComponent"}/> The problem is that when I refresh the page, it auto ...

javascriptreactjsreact-router-dom

Executing a personalized function within a Server Component with the Next JS App Router while the application is running

In my server component Home, I call the function getMyAge: // app/page.tsx import { getMyAge } from './utils/datetime'; export default function Home() { return ( <Page> <Paragraph>I'm {getMyAge()} years old</Parag ...

javascriptreactjsnext.js

Angular does not select the variable_name within the $scope

Here is the HTML code I have written. <div class="container" ng-app="mintcart"> <div class="panel panel-default" ng-controller="categoriesctrl"> <input type="hidden" ng-model="session.sid" value="<?php echo session_id();?>"/&g ...

javascriptangularjs

Utilize Next.js with Axios for making an HTTP request to a Laravel Lumen endpoint, then showcase the retrieved data within the Next.js

I currently have a Next.js application that utilizes Axios to make calls to Lumen endpoints. The Axios HTTP client functions are organized in a separate folder named services/index.tsx, with sample code as follows: export const register = async (payload: a ...

javascriptreactjslaravelaxiosnext.js

Is there a way to automatically restart my Gulp task when I save changes?

I have a series of Gulp tasks in version 4 that handle tasks like compiling Webpack and Sass, optimizing images, etc. These tasks are automated through a "watch" task while I am working on a project. However, when my watch task is active, saving a file tr ...

javascriptnode.jsgulpgulp-watch

angularjs Populate input fields with default values within ng-repeat loop

Our challenge is to display input text with pre-filled values within a list using the ng-repeat directive. <ul ng-repeat="post in postList> <input type="text" ng-model="postid" nginit="postid='{{post.id}}'"></input> </u ...

javascriptjqueryangularjs

Parameters in functions are received by value

When working with JavaScript, one common point of confusion is the way variables are treated based on their data type. Variables of primitives are passed by value, while variables of objects are passed by reference. However, in function arguments, both pri ...

javascript

Error: Appwrite Login Authentication failed due to account.createEmailSession function not recognized as a valid function

Looking for help with Vue and Appwrite? Check out this tutorial: https://appwrite.io/docs/tutorials/vue/step-1 src/appwrite/index.js import { Client, Databases, Account } from "appwrite"; const client = new Client(); client .setEndpoint(" ...

javascriptvue.jsviteappwrite

Creating crisp and clear text within a three.js texture

I am currently incorporating a 512x512 SVG onto a circular plane in my project using the following code snippet: const texture = new THREE.TextureLoader().load('img/plane.svg'); ​ const material = new THREE.MeshBasicMaterial({ ...

javascriptthree.jstextures

Commitment within a forEach iteration

While working with a foreach loop, I am facing some challenges. Here is the scenario: I have multiple elements stored in an object array. For each object, I need to execute two queries. After completing the queries for one object, I move on to the next and ...

javascriptnode.jsecmascript-6es6-promise

Is it possible to incorporate a variable into an object?

If you are wondering whether it is possible to utilize a variable in the following scenario, the reason for my inquiry is connected to the potential of utilizing an input element to dynamically modify the variable: var str = "pineapples" var cost = { pine ...

javascripthtml

A method for displaying both the next and previous steps without relying on a switch case statement

I have an array list as follows: const data = [ { title: 'Title1', }, { title: 'Title2', }, { title: 'Title3', }, { title: 'Title4', ...

javascriptreactjsnext.js

Combine the power of JavaScript with Node.js

I am brand new to the world of node and feeling a bit lost when it comes to finding the right solution for my current issue. I would greatly appreciate any guidance towards the best approach. Currently, I am using the Buddy framework to compile coffeescri ...

javascriptnode.jscoffeescript

JavaScript quiz featuring randomized questions with selectable radio buttons

I need assistance in creating a feature on my webpage where users can select the number of questions they want to answer (ranging from 1 to 10). The selected number of questions should then be displayed randomly, without any duplicates. I am not very famil ...

javascriptjqueryhtml