Creating Backbone models that inherit the prototype from THREE.Object3D

Question

Creating Backbone models that inherit the prototype from THREE.Object3D

I am looking to create a unique model that combines the functionality of Backbone.Model with another prototype from THREE.Object3D in three.js version r69. Currently, my approach involves creating an object and setting its prototype to be that of THREE.Object3D like this:

var MyObj = new function(){...}
MyObj.prototype = Object.create(THREE.Object3D.prototype);
MyObj.prototype.constructor = THREE.Object3D;

However, I am facing challenges in making MyObj an instance of Backbone.Model while still retaining the THREE.Object3d prototype so that I can seamlessly add it to a scene and use it as a regular THREE.Object3d without compromising the Backbone.Model interface.

When I attempt to extend Backbone.Model with THREE.Object3D's prototype using the following code:

var MyObj = Backbone.Model.extend(THREE.Object3D.prototype);

I encounter errors related to attributes being undefined, particularly rotation. I am unsure why this is happening. Why is rotation showing up as undefined?

EDIT: Check out my fiddle here. Don't forget to open the console to view the errors!

javascript backbone.js three.js underscore.js

Answer 1

Answer №1

To achieve this, I would suggest extending the prototype of Backbone.Model and then invoking the constructor function of THREE.Object3D. This can be done by:

var Object3DModel = Backbone.Model.extend({

    initialize: function() {
        _(this.prototype).extend(THREE.Object3D.prototype);
        THREE.Object3D.apply(this, arguments);
    }

});

In this example, I am utilizing the underscore extend method to extend the prototype.

You can view a demonstration on jsbin.

Edit

After further experimentation, it appears that a more effective approach would be:

// Begin with a constructor, calling the constructors of both classes
var Object3DModel = function() {
  THREE.Object3D.apply(this, arguments);
  Backbone.Model.apply(this, arguments);
};

// Copy Object3D Prototype
Object3DModel.prototype = new THREE.Object3D();

// Add Backbone.Model prototype
var ref = new Backbone.Model();
for ( var name in ref ) {
  Object3DModel.prototype[name] = ref[name];
}

Due to the use of getters and setters in the THREE library, this is the correct way to inherit them.

I have also created a JsBin demonstration which includes testing of the basic functionality.

Answer 2

To achieve this, I would suggest extending the prototype of Backbone.Model and then invoking the constructor function of THREE.Object3D. This can be done by:

var Object3DModel = Backbone.Model.extend({

    initialize: function() {
        _(this.prototype).extend(THREE.Object3D.prototype);
        THREE.Object3D.apply(this, arguments);
    }

});

In this example, I am utilizing the underscore extend method to extend the prototype.

You can view a demonstration on jsbin.

Edit

After further experimentation, it appears that a more effective approach would be:

// Begin with a constructor, calling the constructors of both classes
var Object3DModel = function() {
  THREE.Object3D.apply(this, arguments);
  Backbone.Model.apply(this, arguments);
};

// Copy Object3D Prototype
Object3DModel.prototype = new THREE.Object3D();

// Add Backbone.Model prototype
var ref = new Backbone.Model();
for ( var name in ref ) {
  Object3DModel.prototype[name] = ref[name];
}

Due to the use of getters and setters in the THREE library, this is the correct way to inherit them.

I have also created a JsBin demonstration which includes testing of the basic functionality.

Answer 3

Answer №2

Perhaps this solution will be beneficial to you.

let myObject = Backbone.Model.extend(THREE.Object3D.prototype);

Answer 4

Perhaps this solution will be beneficial to you.

let myObject = Backbone.Model.extend(THREE.Object3D.prototype);

Creating Backbone models that inherit the prototype from THREE.Object3D

Answer №1

Answer №2

Similar questions

Utilize jQuery ajax to target a particular recurring input

How to retrieve a JavaScript variable within the codebehind of an ASP.NET application

Modify the -webkit-text-stroke- hue using JavaScript

Incapable of stopping a form submission when a certain criteria is satisfied

"Use Jquery to automatically scroll back to the top of the page after opening a new window

"Utilizing NodeJS in conjunction with socket.io and PostgreSQL's LISTEN feature

The JSON file is not being parsed by Javascript

Give a CSS Element a specific class

Translate Latitude and Longitude values into X and Y coordinates on an Albers projection map

Step-by-step guide on utilizing User scripts with the $window.open function in AngularJS

Using curly braces for imports within a Nuxt component

How can I retrieve data from an API in Vue using promises?

display a table using angularjs only if the table contains at least one row

The application of the applyMatrix method does not effectively adjust the scale in the Y axis when

Building a structured object from the HTML document outline

"Using a function parameter as a key in a JSON object

What is preventing bots and crawlers from detecting Next.js meta tags?

Going through an array of objects that hold arrays of data

The radio input is not being properly checked using ng-checked in Angular

Javascript Workers - how can I improve the handling of worker messages and address any delays?