Using Typescript and ThreeJS, include new elements to the environment within the loader

Can someone help me with the following code snippet?

export class LandingPageComponent implements OnInit { 
scene: THREE.Scene;
(...)
 ngOnInit() { 
this.scene = new THREE.Scene();
var loader = new THREE.JSONLoader();
loader.load("../../assets/fire_lion.json",function ( obj ) {
    this.scene.add(obj); // Issue here
});

I have a defined and functioning scene, but I encounter an error when trying to execute this code. The error indicates that the scene is not declared, which makes sense as "this" no longer refers to the class. How can I resolve this and successfully add the object to the scene?

Thank you in advance for your assistance!

PS: Attempting to use ObjectLoader results in an error message prompting me to utilize JSONLoader.

typescriptthree.js

Answer №1

The reason for this change in the load callback is due to the need to either call bind or utilize TypeScript syntax that transpiles to a bind call.

loader.load("../../assets/fire_lion.json",function ( obj ) {
    this.scene.add( obj );
}.bind(this)); // binding here

or

loader.load("../../assets/fire_lion.json", ( obj ) => {
    this.scene.add( obj );
}));

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 rotation adjustment for the Three.js camera is not functioning as expected

Having trouble adjusting the camera rotation. I've attempted: camera.rotation.set(10,10,10); camera.rotation.x = 10; However, none of these methods seem to be working. The camera's old values remain unaffected. Even setting camera.rotationAu ...

three.js

Property referencing for change detection is a valuable technique

I'm struggling to update my template when changing a boolean property that is referenced in another array property. I expected the changes to reflect in my template, but they are not showing up. Upon initial load, everything appears in its initial st ...

javascriptangulartypescript

Difficulty recognizing left click on onmouseup and onmousedown events in React with TypeScript

I am experiencing an issue with my code that is meant to update the mousePressed variable accordingly when the mouse button is pressed and released. Surprisingly, it works as expected for right-click and middle-click events but not for left-click. The ev ...

reactjstypescriptmouseevent

Angular error: Trying to assign a value of type ArrayBuffer to a string type

Is there a way to display a preview of a selected image before uploading it to the server? Here is an example in HTML: <div id="drop_zone" (drop)="dropHandler($event)" (dragover)="onDragover($event)"> <p>drag one or more files to ...

javascriptangulartypescript

Guide to typing a new version of a function without any optional parameters using a mapped tuple

I am attempting to create a modified version of a function that has the same arguments as the original function, but with none being optional. I have tried using a mapped tuple approach with the following logic: type IFArgs = ArgsN<typeof getFunc> t ...

typescript

There is an issue with the typings for React.createElement that is causing errors

Is it possible to implement React.createElement with TypeScript successfully? import React from "react"; type Props = { label: string; }; const Three: React.FC<Props> = (props: Props) => { return <div>{props.label}</div&g ...

reactjstypescriptreact-typescript

Can we verify if strings can serve as valid property names for interfaces?

Let's consider an interface presented below: interface User { id: string; name: string; age: number; } We also have a method defined as follows: function getUserValues(properties:string[]):void { Ajax.fetch("user", properties).then( ...

typescript

How to implement a dynamic tag using TypeScript in React?

How can I implement dynamic tag typing in React using TypeScript? Take a look at the following code snippet: interface CompProps { tag: string; } const MyComponent: React.FunctionComponent<CompProps> = ({ tag = "div", children }) => { co ...

reactjstypescript

How to bring in a specific module using its name in TypeScript

Can a module in typescript import itself by its own name? For example, let's consider a module called my-module with various tests. Is it possible to import it within the tests using import ... from "my-module" instead of using a local path like impo ...

node.jstypescript

What is the solution for this problem in TypeScript involving an API service call?

Trying to utilize the API Service to fetch data and display the response as an object created by a class constructor Currently executing a Typescript code that interacts with the API Service import * as request from "request"; import { Users } from "./Us ...

typescript

What are some key indicators in the source code that differentiate TypeScript from JavaScript?

Reviewing some code on Github, I am looking for ways to quickly determine whether the script is written in JavaScript or TypeScript. Are there any simple tips or hints that can help with this? For instance, when examining an array declaration like the on ...

javascripttypescript

The process of invoking another component's method in Angular 2

Is there a way to call a function from one component in Angular 2 into another? I have two components and I need to invoke a method defined in the other component. The components do not have a parent-child relationship, as the overview component is a rout ...

angulartypescriptservicecomponents

Enhancing Code Functionality with TypeScript Overload Methods

I've encountered an issue with a code snippet that has a method with 2 overloads: /** * Returns all keys of object that have specific value: * @example * KeysOfType<{a:1, b:2, c:1}, 1> == 'a' | 'c' */ type KeysOfType<M ...

typescripttypesoverloading

Preserving type information in TypeScript function return values

Wondering how to make this code work in TypeScript. Function tempA copies the value of x.a to x.temp and returns it, while function tempB does the same with x.b. However, when calling tempA, the compiler seems to forget about the existence of the b field ...

typescript

Can type information be incorporated during compilation?

Consider the code snippet below: function addProperties(keys: String[]): Object { // For illustration purposes, this is a specific return return { firstProperty: "first_value", secondProperty: "second_value" }; } export defaul ...

typescript

Attempting to invoke a promise within a function yields an error message stating that it lacks call signatures

Recently, I came across this interesting class: export class ExponentialBackoffUtils { public static retry(promise: Promise<any>, maxRetries: number, onRetry?: Function) { function waitFor(milliseconds: number) { return new Pr ...

javascripttypescriptes6-promise

Is casting performed by <ClassName> in typescript?

According to the Angular DI documentation, there is an example provided: let mockService = <HeroService> {getHeroes: () => expectedHeroes } So, my question is - can we consider mockService as an instance of HeroService at this point? To provide ...

angulartypescript

How can I change an icon and switch themes using onClick in react js?

I have successfully implemented an icon click feature to change the colorscheme of my website (in line 21 and changeTheme). However, I also want the icon to toggle between FaRegMoon and FaRegSun when clicked (switching from FaRegMoon to FaRegSun and vice v ...

javascriptreactjstypescript

There is an issue with the hook call while trying to establish a context with a reducer

I am facing an issue while setting up the AppProvider component that utilizes a context and reducer to manage global data for my application. The problem seems to be arising from the useReducer hook used within the AppProvider. I have checked the error mes ...

javascriptreactjstypescriptreact-hooks

Utilize multiple validators.patterns within a single value for enhanced data validation

I need to implement two different patterns for the formControlName='value' based on the type selected. If type is 'A', I want to use the valuePattern, and if type is 'B', I want to use the uname pattern. This is my HTML code: ...

angulartypescript