unable to inherit from THREE.js superclass

I am brand new to working with three.js and JavaScript, so I'm not sure if my issue lies within three.js or JavaScript itself. I've been trying to inherit from the THREE.Mesh class in order to display a mesh on the screen, but I can't seem to get it right. It seems that I am unable to call the constructor `new THREE.Mesh( geometry, material );` inside the constructor of my class. Could someone please provide some guidance?

I came across this post: Extending Three.js classes

and managed to make it work following the proposed method, but I would prefer using a proper class instead of the unconventional approach suggested there.

    class Icon extends THREE.Mesh{
      constructor(iconName, worldPosition, cameraPosition){
        super();
        this.iconName = iconName;
        this.worldPosition = worldPosition;
        this.cameraPosition = cameraPosition;
        var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );     
        var mesh = new THREE.Mesh( geometry, material );   
        console.log(this.mesh); // Error: undefined
      }
    };
...

scene.add(obj.mesh);
// Error: THREE.Object3D.add: object not an instance of THREE.Object3D.



Answer №1

To properly define the Icon class, it should be written as follows:

class Icon extends THREE.Mesh{
  constructor(iconName, worldPosition, cameraPosition){
    super();
    this.iconName = iconName;
    this.worldPosition = worldPosition;
    this.cameraPosition = cameraPosition;
    this.geometry = new THREE.BoxBufferGeometry();
    this.material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );     
    console.log(this);
  }
};

Instead of instantiating a new instance of Mesh, the intention is to simply assign the newly created geometry and material to the existing properties geometry and material.

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

Give a response in ISO string

Hey everyone, I'm running into an issue when trying to access a date property in an array of objects from another component using props. When I try to convert it to a string using the 'toISOString()' method, I get an error saying 'toISO ...

Retrieving a database value in Node.js Firestore containing a space

Hello, I'm just getting started with node Js and I anticipate that it will be a smooth ride! Currently working on an application using node JS with Firestore where I need to retrieve data like "display name": James and "Age": 22 Since Age does not h ...

Issue with global function not being implemented

The script I have creates a div and adds a function to remove this div on click, but for some reason it isn't working properly. function del(el) { $("#"+el).remove(); } function create() { var element = document.createElement("div"); var ...

How can I convert a serial port's raw data buffer into an array of numerical values?

I recently added the serialport module to my project. Within this particular function: port.on('data', function (data) {.....}); The variable data, which is the argument for the callback, contains the raw data received from the serial port. I ...

I need to press the button two times to successfully submit

I am experiencing a remote validation issue. When I click on the submit button without focusing on the text box, it triggers a remote ajax call for validation. However, when I press the submit button a second time, the form gets submitted. On the same cl ...

Load Collada models as a group using Three.js when the page loads

Currently, I am in the process of loading elements of a model and then grouping them together. My goal is to be able to move this group as a whole after all the elements have been loaded. One challenge I am facing is how to execute code only once all the ...

Utilizing jQuery for array selection

If there's an array of HTML elements with the following structure... let info = [<tr>...</tr>, <tr class="name">...</tr>, <tr class="colour">...</tr>] How can one select only the class name from the info array usi ...

Uncover hidden content by clicking a button with JavaScript

I need help with creating a function that hides additional content until a button is clicked. Currently, my script displays the content by default. How can I modify it to hide the content by default and only reveal it when the button is clicked? functi ...

The Jquery scroll function seems to be unable to detect the updated variable value that needs to be passed to

As someone who is not a traditional programmer, I have learned programming by searching on Google or asking questions on Stack Overflow. I am attempting to create an ajax function that will retrieve feeds from a database as the user scrolls, based on the ...

Try out various scenarios using propsdata within Vue.js

In my component, there's a button that is displayed only when an article.link prop is not empty. I need to write a test to verify if the button is rendered when article.link has a value and another test for when it is empty. a.btn.plutus_btn-primary. ...

Implement the scope change in an Angular controller by utilizing controllerAs functionality

I am facing an issue with my controller setup as shown below: angular .module('app.core') .controller('TestController', TestController); TestController.$inject = ['$timeout', '$interval']; function TestControl ...

Exploring the world of chained JavaScript Promises for automatic pagination of an API

Dealing with a paged API that requires fetching each page of results automatically has led me to construct a recursive promise chain. Surprisingly, this approach actually gives me the desired output. As I've tried to wrap my head around it, I've ...

Using radio buttons to toggle the visibility of a div element within a WordPress website

I am currently working on creating a WordPress page using the custom page tool in the admin interface. My goal is to have 3 radio buttons, with 2 visible and 1 hidden. The hidden button should be automatically checked to display the correct div (although ...

Validation in ASP.Net to ensure the correct number of days between the arrival and departure dates

One of my project requirements involves checking the validation of the number of days entered between two date selectors (From & To Dates). The constraint is that the difference should not exceed 100 days. I'm considering using ASP.NET validators for ...

Verifying the presence of a popover

Utilizing bootstrap popover in my project, I am encountering an issue where the target variable may not always exist on the page. Currently, I am displaying the popover using the following code snippet - target = $('#' + currentPopoverId.data(& ...

Visit a webpage on my site

Is it feasible to embed a website within another website? Suppose I have my index.html file. What if in the center of that file, we include an iFrame or similar element that loads , allowing users to explore Google directly on my website? ...

The attribute 'getTime' is not found in the data type 'number | Date'

class SW { private startTime: number | Date private endTime: number | Date constructor() { this.startTime = 0, this.endTime = 0 } start() { this.startTime = new Date(); } stop() { this.endTim ...

What is the best way to create an associative array using jQuery and then send it through AJAX to be parsed by PHP?

Is there a way to create an associative array in jQuery and send it via ajax to a php page for processing? Here is an example of what I am trying to achieve... // jQuery if($something == true) { data[alt] = $(this).attr('alt'); data[sr ...

Locate the destination URL in Fancybox

Is there a way to insert a link into the title, using the selected anchor's href but with an added prefix? I need help figuring out how to achieve this. Specifically, I am looking to access this.href on the chosen anchor element. $(".gallery-module & ...

When trying to execute the onclick JavaScript function, an error is encountered stating that the function has

I encountered an issue while trying to execute the onclick function. Interestingly, everything works smoothly when I remove the AJAX call from the code. However, as soon as I include the AJAX call, the function stops working and throws an error: searc ...