The FileLoader in Three.js does not have a constructor when passed through the scope manager

Although this question may appear to be a duplicate, as it is similar to this one and others, none of the solutions I have found have helped me resolve the issue. Therefore, I have decided to post it here in the hopes of finding a solution, as it is driving me crazy.

Currently, I am working on an Angular2 project generated with Angular CLI, with only HTML, CSS, and JS files (all up to date and latest versions). I have imported Three.js and three-obj-loader via npm and declared it in my component like this:

import * as THREE from 'three';
declare var require: any;
const OBJLoader = require('three-obj-loader')(THREE);

I am able to create shapes, use lighting and shading, but I am unable to load meshes from external .obj files. I have tried various approaches like the one below:

const manager = new THREE.LoadingManager();
const loader = new THREE.OBJLoader(manager);
loader.load('./working/path/to/file.obj', function (object) {

object.position.x = 0;
object.position.y = 0;
object.scale.x = 10;
object.scale.y = 10;
object.scale.z = 10;
const texture = THREE.TextureLoader('./working/path/to/file.jpg');
const material = new THREE.MeshLambertMaterial({ map: texture });
const mesh = new THREE.Mesh(object, material);
scene.add(mesh);
});

However, when I try to load the .obj file, I get a console error:

TypeError: undefined is not a constructor (evaluating 'new THREE.FileLoader(scope.manager)')

The error points to line 49 of the "three-obj-loader" module that I installed from here. The relevant part of the third-party code mentioned is:

THREE.OBJLoader.prototype = {

constructor: THREE.OBJLoader,

load: function load(url, onLoad, onProgress, onError) {

var scope = this;

var loader = new THREE.FileLoader(scope.manager);
loader.setPath(this.path);
loader.load(url, function (text) {

onLoad(scope.parse(text));
}, onProgress, onError);
},

I am not sure if this issue is related to the fact that I have not installed or declared any special types for these modules, and I am using plain JS source files. I have also not installed any file loader.

Additionally, I attempted to implement OBJLoader2 from here but encountered the same result.

Any advice would be greatly appreciated.

Best, k

Answer №1

With much gratitude to @TheJimO1 for their insightful comment, I successfully resolved the issue at hand. Opting for a different NPM package created by JordanDelcros, I found that it offered a distinct set of files compared to the package developed by MrDoob that I had previously been using. By importing it into my component in the following manner:

declare var require: any;
const OBJLoader = require('three-js/addons/OBJLoader');
const THREE = require('three-js')([OBJLoader]);

I am delighted to report that the OBJloader now seamlessly loads external files without any trouble.

UPDATE: Thanks once again to @TheJimO1, I was able to achieve the desired outcome through an alternative method by utilizing this official package, which supports the latest version of Three.js and is compatible with three-obj-loader. I simply imported it as shown below:

declare var require: any;
const THREE = require('three');
const OBJLoader = require('three-obj-loader')(THREE);

It appears there are now at least two distinct viable solutions:

[A] utilize the aforementioned npm package by JordanDelcros, supporting r77 with all included addons;

[B] opt for the more official three package mentioned above, in combination with three-obj-loader (as referenced in the original question), supporting r85

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

What is the best way to begin at a specific index in an array without skipping any elements?

As I continue my journey of learning JS, I have encountered a task that has left me quite perplexed. The objective is to provide an index to start from and also include the items missing in the array while displaying them in an angular format. Here is what ...

Angular Binding issue - Unable to bind to 'ngModel' as it is not recognized as a valid property of 'input' element, despite the property being present

I have developed a component class like the one below and I am attempting to link the class fields to the template, but encountered the following error: ERROR in src/app/admin/projects/projects.component.html: 41:34 - error NG8002: Can't bind to &ap ...

Spheroidal surface texture appears blurry following software update

Since updating from r67 to r86, our soccer balls don't look as sleek. Has anyone encountered a similar problem before? The code that previously gave us smooth spheres is now causing issues with the texture (and some lighting, but that's manageab ...

Obtain the result and retrieve it using `window.angularComponentRef.zone.run`

In my work, I have been able to successfully call angular functions within a component through a static file. For reference, you can visit this link: How to expose angular 2 methods publicly?. The method suggested in the link involves using Zones in Angul ...

Angular 7/8 now allows for empty strings in Template Driven Forms

I've encountered a problem with my form validation that allows empty strings. The required attribute works, but it still allows the user to input spaces. I came across a solution online which involves using ng-pattern with the pattern pattern=".*[^ ]. ...

Angular mat-select is having difficulty displaying options correctly on mobile devices or devices with narrow widths

In my Angular project, I've encountered an issue with mat-select when viewing options on mobile or low-resolution screens. While the options are still displayed, the text is mysteriously missing. I attempted to set the max width of the mat-option, but ...

Button located beneath or above each individual image within the *ngFor loop

With the *ngFor loop, I am able to populate images but now I want to include a button below or on each image. Unfortunately, my CSS knowledge is limited. Below is the code I have: HTML Code <div class="container"> <div ...

Tips for incorporating the design of a single Angular Material component

My goal is to utilize just one Angular material component. Unfortunately, the only reference I have for theming and styling involves using @include mat.all-component-themes($theme); This applies styling to all material components, whereas I specifically r ...

Integrating a third-party plugin into an Angular 4 component

I am interested in integrating a 3rd party plugin into a component, such as CKEDITOR or even a jQuery plugin. While I am aware of the ng-ckeditor package, I prefer not to use it because I want the flexibility to incorporate any plugin in the future withou ...

Sorting through items within a container object

I am currently working with an object named 'docs' that contains multiple objects within it. I am attempting to determine the count of entries that have specific values for both 'exopp_rooms_id_c' and 'is_active'. While this m ...

Learn how to conceal every third digit entered into an input box. When the submit button is clicked, reveal the original unmasked values

Currently, I am looking to implement masking for digits as they are being typed, rather than just on blur. Additionally, I would like the original entered values to be displayed when the submit button is clicked. You can find my attempt at this here: https ...

A specialized type that guarantees a string union includes a particular string literal

I need to define a Mapped type that specifies a field named status which can be either a string or the string value ready: This example works as expected: export type ValidServiceState = HasReady<{ status: "ready" }>; The following should ...

Unable to retrieve data using Http Get in Angular 2

In my service.ts class, I have the following method: getData(username:string, password:string) { let params: URLSearchParams = new URLSearchParams(); params.set('username', username); params.set('password', password); ...

Icon positioned to the left within the text box

Hey there! I'm new to NativeScript and I've been struggling to place an icon inside a textbox. Can someone please help me out? Expected Output: https://i.stack.imgur.com/xvoZG.png Code <GridLayout columns="*, *" rows=& ...

Having trouble with typecasting in Angular 9 after receiving an HTTP response?

When initializing my component, it fetches student information from an API. Here is the ngOnInit code for component-version1: ngOnInit(): void { if(!this.student) { this.studentsService.getStudentDetail(this.id).subscribe( (response: Stu ...

Having trouble with Angular 6 and the @input directive not functioning correctly?

I created a basic Angular application to understand how @input works for component communication, but I am facing an issue where the value is not getting passed. I have gone through various forums where others had similar problems, but none of the suggeste ...

Encountering the issue: "Unable to establish validator property on string 'control'"

Has anyone encountered this error message before? TypeError: Cannot create property 'validator' on string 'control'" import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core'; import { CommonModule } from &ap ...

Tips for distributing services in Angular

I'm currently working on an angular application that consists of different modules, with lazy loading enabled. In one of the modules, let's call it module A, I have a service called userService that I need to access in a component located in anot ...

What is preventing the value from changing in auth.guard?

I am encountering an issue with the variable loggined, which I modify using the logTog() method. When I call this method, a request is made to a service where the current result is passed to auth.guard. However, in the console, it displays "undefined". Can ...

Is there a way to showcase Images or Stars in a Material Angular Form?

I have a form where the rating is displayed using star images, but it is stored as a number in string format on the backend. While experimenting, I am trying to figure out the best way to achieve this. Currently, this is what I have: https://i.sstatic.net ...