Creating a custom Object class in THREE.js that handles imported meshes

Question

Creating a custom Object class in THREE.js that handles imported meshes

Hey there, I'm just getting started with THREE.js and I'm trying to create a custom class that extends THREE.Mesh for my scene. My goal is to have the class contain an imported mesh via JSON loader, but so far all my attempts have not been successful.

Below is my code snippet:

THREE.ImportedMesh = function(){
    this.type = 'ImportedMesh';

    this.load = function(url){
        var loader = new THREE.JSONLoader();
        loader.load(url, function(geometry,materials){

            THREE.Mesh.call(self,geometry,new THREE.MeshFaceMaterial(materials));
        });
    };
};
THREE.ImportedMesh.prototype = Object.create( THREE.Mesh.prototype );
THREE.ImportedMesh.prototype.constructor = THREE.ImportedMesh;

Unfortunately, I keep encountering these errors in the console:

Uncaught TypeError: Cannot read property 'remove' of undefined

Uncaught TypeError: this.updateMorphTargets is not a function

If anyone has any insights on how to resolve this, I would greatly appreciate it!

Thanks,

Rick

javascript three.js

Answer 1

Answer №1

If you're looking for a similar solution, consider the following code snippet:

CustomMesh = function(){
  this.category = 'CustomMesh';

  THREE.Mesh.call(this);
  var self = this
  this.loadData = function(url){
    var dataLoader = new THREE.JSONLoader();
    dataLoader.load(url, function(geometry,materials){
       self.material = new THREE.MeshFaceMaterial(materials)
       self.geometry = geometry
    });
  };
};
CustomMesh.prototype = Object.create( THREE.Mesh.prototype );
CustomMesh.prototype.constructor = CustomMesh;

Answer 2

If you're looking for a similar solution, consider the following code snippet:

CustomMesh = function(){
  this.category = 'CustomMesh';

  THREE.Mesh.call(this);
  var self = this
  this.loadData = function(url){
    var dataLoader = new THREE.JSONLoader();
    dataLoader.load(url, function(geometry,materials){
       self.material = new THREE.MeshFaceMaterial(materials)
       self.geometry = geometry
    });
  };
};
CustomMesh.prototype = Object.create( THREE.Mesh.prototype );
CustomMesh.prototype.constructor = CustomMesh;

Creating a custom Object class in THREE.js that handles imported meshes

Answer №1

Similar questions

What is the best way to modify an array within separate functions in a NodeJS environment?

Avoiding JavaScript onclick event using JSON information

Utilizing sub-object attributes as ng-model in AngularJS

Ways to verify and incorporate https:// in a URL for a MEAN Stack application

Tips for transitioning from an old link to a new link within an MVC framework

Tips for implementing live camera feed in reactJs

Is it possible to utilize waxjs for retrieving data on NFTs within the Wax Cloud Wallet?

Prevent AJAX request while in progress?

Using HTML5 validation on a form along with a button that triggers a JavaScript function to send an email via PHP and display a modal upon

The encodeURIComponent function does not provide an encoded URI as an output

Ensure that variables are accessible to asynchronous calls without the use of closures

Retrieve data from an external website containing an HTML table without a table ID using Java Script and transform it into JSON

Functions for abbreviating and combining strings in Javascript

What measures can be taken to block Javascript from retrieving PHP cookie information?

Configuring babel-loader in webpack for optimal HMR functionality

Encountering issues with resolving dependencies in webdriverIO

Code in JavaScript: Generating Random Number within a Loop

Deactivating one div's class upon clicking on another div

Explain the operation of recursive function calls in JavaScript

Angular and Node integration with Firestore authentication