Expanding the functionality of Three.js classes

Question

Expanding the functionality of Three.js classes

I need help figuring out how to extend the Object3D class in Three.js.

I've been trying to follow a Stackoverflow question on this topic, but despite multiple attempts, I haven't been successful.

Is there a way to extend a ThreeJS object?

If anyone has specific code examples or tips on how to make this work, it would be greatly appreciated. Here's what I have tried so far:

var MyObject3D = function() {
   THREE.Object3D.call(this);
   MyObject3D.prototype = new THREE.CubeGeometry();
   MyObject3D.prototype.constructor = MyObject3D;
}

When creating an instance:

var thing = new MyObject3D();
var testGeo = new THREE.CubeGeometry(10, 10, 10);
var testMat = new THREE.MeshPhongMaterial();
var testMesh = new THREE.Mesh(testGeo, testMat);
thing.add(testMesh);

However, when trying to call the "add" method on the MyObject3D instance using "thing," an error saying that "thing" does not have a method "add" is returned.

Can someone please explain what might be causing this issue?

javascript three.js

Answer 1

Answer №1

It seems like you're assigning the prototype to CubeGeometry, which does not have an add method. From your instantiation approach, it appears that you actually want your object to inherit from the Mesh prototype.

You may need something along these lines:

var MyObject3D = function() {
    // Call the Mesh constructor with the provided arguments
    THREE.Mesh.apply(this, arguments);
};
// Inherit methods from Mesh for MyObject3D
MyObject3D.prototype = Object.create(THREE.Mesh.prototype);
// Ensure the correct constructor is called
MyObject3D.prototype.constructor = MyObject3D;

To create an instance:

var testGeo = new THREE.CubeGeometry(20, 20, 20);
var testMat = new Three.MeshNormalMaterial();
var thing = new MyObject3D(testGeo, testMat);

Answer 2

It seems like you're assigning the prototype to CubeGeometry, which does not have an add method. From your instantiation approach, it appears that you actually want your object to inherit from the Mesh prototype.

You may need something along these lines:

var MyObject3D = function() {
    // Call the Mesh constructor with the provided arguments
    THREE.Mesh.apply(this, arguments);
};
// Inherit methods from Mesh for MyObject3D
MyObject3D.prototype = Object.create(THREE.Mesh.prototype);
// Ensure the correct constructor is called
MyObject3D.prototype.constructor = MyObject3D;

To create an instance:

var testGeo = new THREE.CubeGeometry(20, 20, 20);
var testMat = new Three.MeshNormalMaterial();
var thing = new MyObject3D(testGeo, testMat);

Expanding the functionality of Three.js classes

Answer №1

Similar questions

Creating a cascading select box with two levels in PHP and MySQLExplanation on how to generate a two-tier connected

Integrating Ace Editor into a PHP Powered Web Application

Is there a way to remotely access and read text files stored on a server using either JavaScript or Ajax from an IIS6.0 Virtual directory?

Show or conceal a class

Is there a way to verify if a time interval has already been established using Javascript?

Nodejs and express authentication feature enables users to securely access their accounts by verifying their identity before they

Maximizing the benefits of the express.js API through functions such as fetching data with get, sending

Change the colors and messages shown when the button is clicked or hovered over

What could be causing this array to be blank?

Trigger a click event upon page load using jQuery or JavaScript

Shopify Inventory Dropdown Tailored to Stock Levels

Top technique for mirroring a website

Unable to display the retrieved list data using v-for loop from axios get request

Disabling Express BodyParser for handling file uploads in Node.js

Discovering the parent route details of the current route from within a component

Can we modify the styling of elements in Angular based on an object property?

How can I display a timer icon in front of text on a Material-UI CardHeader subtitle?

Use Yii2 to pass an ID when a button is clicked in order to render a partial using

Launching an external JavaScript from within a separate JavaScript file

Error message: Attempting to access the 'path' property of an undefined variable results in TypeError while utilizing cloudinary services