Issue with Three.js STL loader using TypeScript: Error message "Uncaught TypeError: Cannot read property 'XHRLoader' of undefined"

Having trouble loading an STL file into Three.js due to the three-stl-loader npm module not recognizing the THREE object.

Here is the code snippet in question:

import * as THREE from 'three'
import * as THREESTLLoader from 'three-stl-loader'

var STLLoader = new THREESTLLoader()
var loader = new STLLoader(THREE)
loader.load('path/to/file.stl', function (geometry: any) {})

Encountering this error: https://i.sstatic.net/4F6OP.png

The issue arises on line 45 in index.js within the stl-loader where the three-stl-loader module tries to use the THREE object without success: https://i.sstatic.net/haWHD.png

This project is utilizing TypeScript and Webpack for compilation, which suggests a potential problem with the compilation process.

typescriptthree.js

Answer №1

It appears that I have discovered the missing piece. Instead of passing the THREE object to the constructor, it should be passed to the module itself. So all I had to do was add THREE to the module like this:

import * as THREE from 'three'
import * as THREESTLLoader from 'three-stl-loader'

var STLLoader = new THREESTLLoader(THREE) // Added THREE
var loader = new STLLoader() // Removed THREE
loader.load('path/to/file.stl', function (geometry: any) {})

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

Fastify Schema Failing to Validate Incoming Requests

Currently, our backend setup involves using Node.js and the Fastify framework. We have implemented a schema in satisfy to validate user input. Below is the schema defined in schema.ts: export const profileSchema = { type: 'object', properti ...

javascriptnode.jstypescriptschemafastify

The conflicting definitions of identifiers in one file are at odds with those found in a

Currently, I am in the process of updating an aged component from Typescript version 6 to version 8. After making changes to the Jasmine dependencies listed in the package.json, a new error has been encountered: "There are conflicting definitions for th ...

angulartypescriptjasmine

What are the appropriate method signatures to use in Aurelia's pipeline configuration?

If you want to customize your pipeline steps, you can do so by using addPipelineStep. Just remember that the step's name needs to match one of the default slots in the pipeline: authorize, preActivate, preRender, and postRender. Aurelia provides funct ...

typescriptaurelia

What is the correct way to write SVG markup within SVG tags in a React and NextJS environment?

I currently have a Svg component set up like this interface SvgIconProps { children: React.ReactNode; strokeWidth?: number; width?: number; height?: number; className?: string; } export const SvgIcon = ({ children, strokeWidth = 1, width = ...

reactjstypescriptsvgnext.js

Learn how to implement code splitting in a React application with webpack by exporting components using the syntax "export * from '...'"

In my React app, I recently implemented code splitting which has been working well. However, when analyzing the bundle size, I noticed an issue with how my components folder is loaded in the initial chunk. It includes all components, even those that are on ...

javascriptreactjstypescriptwebpacklazy-loading

How can I export custom MUI theme definitions after overriding them?

I have successfully created a MUI theme for my project, and everything is functioning as expected. Now, I want to extract this theme as a separate library (e.g. @myproject/theme) so that I can easily share and redeploy it across multiple applications. This ...

typescriptmaterial-uireact-typescript

Create a connection where the lighting from a separate scene influences the mesh in another scene

In my current project, I am working on a basic scene that consists of a room, multiple light sources, and a player object. The challenge I am facing is ensuring that the player object always renders on top of the room objects. After following the solution ...

three.js

Angular: Effective communication between components through routing and Observable binding ultimately results in the advancement of ngtsc(233

I designed an Angular Component named "crear-pedido" that exhibits a catalog of items (using row of products) and my aim is for the user to have the ability to click on the values in the ID column and navigate the application to a subordinate component kno ...

angulartypescript

Setting a value to an optional property of an inherited type is a simple task that can

export interface CgiConfiguration { name: string, value?: string } export interface CgiConfigurationsMap { [configurationName: string]: CgiConfiguration } const createCGI = <T extends CgiConfigurationsMap>(configurations: T) => configur ...

typescript

Exploring subobjects while fetching observables (typescript/angular)

When retrieving JSON from an API into an Angular service, I am working with a collection of objects structured like this: { "data": { "id": 1, "title": "one" }, "stats" : { "voteCount": 8 } } I am particularly interested in the ' ...

jsonangulartypescript

Managing recurring days and times in Angular and retrieving the next scheduled time

I'm currently working on a new feature that will allow users to set multiple wake alarms for specific days and times. For example, they may want alarms to go off on Mondays, Wednesdays, and Fridays at 7:00 AM and 8:00 PM, and on Tuesdays and Thursdays ...

angulartypescriptdatetime

Struggling with ThreeJS bufferGeometry position attribute not refreshing after applying translation

Leveraging STLLoader, I successfully loaded an stl file onto a threeJS scene and obtained a BufferGeometry. Following that, I utilized myMesh.position.set(x, y, z) myMesh.rotation.setFromQuaternion(quaternion, 'XYZ'); to manipulate the geome ...

javascriptthree.jsbuffer-geometry

Updating shared variables is a challenge when passing functions as props to multiple functional components

In my work on implementing a navbar feature in the next.js framework, I have developed two functions for managing the mobile interface of the website. These functions handle the opening and closing of the navbar, utilizing a hamburger menu for opening and ...

reactjstypescriptnext.js

Using Typescript: Utilizing generic types within the parent class

I'm currently facing an issue with the code snippet below, which is a simplified example: class QueryArgs { studentId?: string; teacherId?: string; } class BaseValidator<T> { protected args: T; constructor(args: T) { this.args = a ...

typescripttypescript-generics

What is the method to retrieve a child element from an API response in Angular using Typescript?

My REST API is designed to return json data structured with the actual content contained within a "data" node. This setup allows for additional meta information to be included in the request, such as pagination details. { "data": [ { ...

angulartypescript

Efficiently convert Map keys into a Set in Javascript without the need to copy and rebuild the set

Even though I am capable of const set = new Set(map.keys()) I don't want to have to rebuild the set. Additionally, I prefer not to create a duplicate set for the return value. The function responsible for returning this set should also have the abili ...

javascripttypescript

Ways to verify whether any of the variables exceed 0

Is there a more concise way in Typescript to check if any of the variables are greater than 0? How can I refactor the code below for elegance and brevity? checkIfNonZero():boolean{ const a=0; const b=1; const c=0; const d=0; // Instead of ma ...

javascriptangularreactjstypescript

Mongoose does not compare BCRYPT passwords that are empty

I'm currently working on incorporating bcrypt into my mongoose model using typescript. Referencing this link as a guide. However, since my project is in typescript, I'm unable to directly use the provided code. I'm confused about how they&a ...

typescriptexpressmongoosebcrypt

Tips for generating a fixed-length array from multiple arrays with different lengths, focusing on selecting items from each array according to their significance

In order to create a quiz, I am looking to extract 'questions' from various 'topic' arrays. These topics are selected based on the user's preference and are used to populate a question bank for a 20-question quiz. The topics rated ...

javascriptarraystypescriptsortingweighting

What techniques can I use to enhance the feeling of depth while the camera is positioned inside an object in Three.js?

I'm encountering an issue with Three.js related to the camera. My goal is for users to explore the interior of an object, but I'm finding that simply increasing the scale of the object with the camera in the center doesn't create the expect ...

reactjsthree.js