Ways to expand the constructor function of the THREE.Mesh class

Question

Ways to expand the constructor function of the THREE.Mesh class

Exploring Three.js, I'm working on creating a basic model of the solar system. My current task involves building constructor functions for planets and moons. However, I keep encountering an error message:

The function setShadow() is not recognized.

var celestialBody = function(size, color) {
  this.sphere = new THREE.Mesh(new THREE.SphereGeometry(size, 32, 32), 
                               new THREE.MeshLambertMaterial({color:color}))
  return this.sphere
}

celestialBody.prototype = Object.create(THREE.Mesh.prototype);
celestialBody.prototype.constructor = celestialBody;

celestialBody.prototype.setShadow = function() {
  this.sphere.castShadow = true
  this.sphere.receiveShadow = true
}

I also attempted using

THREE.MESH.call(this, geometry, material)

, defining THREE.SphereGeometry = geometry and

THREE.MeshLambertMaterial = material

outside the constructor function. Is there anything specific I should be cautious about when working with Three.js, or is my approach flawed?

Edit: Another approach attempted -

var celestialBody = function() {
      THREE.Mesh.call(this)
      return this
    }

    celestialBody.prototype.setShadow = function() {
      this.castShadow = true
      this.receiveShadow = true
      return this
    }
    celestialBody.prototype = Object.create(THREE.Mesh.prototype);
    celestialBody.prototype.constructor = celestialBody;

    var samplePlanet = new celestialBody(new THREE.SphereGeometry(70, 32, 32), new THREE.MeshLambertMaterial({color:this.getRandColor()}))

It appears that everything is inheriting correctly, but I am puzzled by the malfunctioning setShadow function.

EDIT 2: Upon trying .call(this), the following error was encountered:

this.updateMorphTargets is not a function

javascript three.js extend

Answer 1

Answer №1

You have encountered an error in your constructor when extending the THREE.Mesh class.

Here is a corrected version:

var Body = function(size, color) {
    THREE.Mesh.call(
        this, 
        new THREE.SphereGeometry(size, 32, 32), 
        new THREE.MeshLambertMaterial({color:color})
    );
}

Body.prototype = Object.create(THREE.Mesh.prototype);
Body.prototype.constructor = Body;

In the constructor, there is no need to include a return statement as the object created will be automatically returned.

When modifying your setShadow method, make sure to refer to this, since the properties castShadow and receiveShadow are direct properties of the newly created Body class (inherited from THREE.Object3D through THREE.Mesh).

Body.prototype.setShadow = function() {
    this.castShadow = true;
    this.receiveShadow = true;
}

It is recommended to use capital letters for the first character of your constructor's name. In the provided code, I changed body to Body. Ensure all other references are updated accordingly.

Check out a demonstration in a fiddle here

Answer 2

You have encountered an error in your constructor when extending the THREE.Mesh class.

Here is a corrected version:

var Body = function(size, color) {
    THREE.Mesh.call(
        this, 
        new THREE.SphereGeometry(size, 32, 32), 
        new THREE.MeshLambertMaterial({color:color})
    );
}

Body.prototype = Object.create(THREE.Mesh.prototype);
Body.prototype.constructor = Body;

In the constructor, there is no need to include a return statement as the object created will be automatically returned.

When modifying your setShadow method, make sure to refer to this, since the properties castShadow and receiveShadow are direct properties of the newly created Body class (inherited from THREE.Object3D through THREE.Mesh).

Body.prototype.setShadow = function() {
    this.castShadow = true;
    this.receiveShadow = true;
}

It is recommended to use capital letters for the first character of your constructor's name. In the provided code, I changed body to Body. Ensure all other references are updated accordingly.

Check out a demonstration in a fiddle here

Answer 3

Answer №2

When utilizing the "function" method, you may encounter this error:

Uncaught TypeError: Class constructor Mesh cannot be invoked without 'new'

The most effective approach is to implement it using classes. Here's an example:

class Body extends THREE.Mesh {
  constructor(size, color) {
    super(
      new THREE.SphereGeometry(size, 32, 32),
      new THREE.MeshLambertMaterial({
        color: color
      })
    )
  }

  setShadow() {
    this.castShadow = true
    this.receiveShadow = true
  }
}

const body = new Body(20, 0x000000)
console.log({castShadow: body.castShadow, receiveShadow: body.receiveShadow})
body.setShadow()
console.log({castShadow: body.castShadow, receiveShadow: body.receiveShadow})

<script src="https://threejs.org/build/three.js"></script>

Answer 4

When utilizing the "function" method, you may encounter this error:

Uncaught TypeError: Class constructor Mesh cannot be invoked without 'new'

The most effective approach is to implement it using classes. Here's an example:

class Body extends THREE.Mesh {
  constructor(size, color) {
    super(
      new THREE.SphereGeometry(size, 32, 32),
      new THREE.MeshLambertMaterial({
        color: color
      })
    )
  }

  setShadow() {
    this.castShadow = true
    this.receiveShadow = true
  }
}

const body = new Body(20, 0x000000)
console.log({castShadow: body.castShadow, receiveShadow: body.receiveShadow})
body.setShadow()
console.log({castShadow: body.castShadow, receiveShadow: body.receiveShadow})

<script src="https://threejs.org/build/three.js"></script>

Ways to expand the constructor function of the THREE.Mesh class

Answer №1

Answer №2

Similar questions

Angular Pause until the variable is ready

What could be causing the issue with the array.push method not functioning

The method $event.stopPropogation doesn't seem to be functioning properly

Performing an AngularJS $http POST request with a combination of JSON parameter and query string

The property 'licenses' has incompatible types. The type 'License[]' cannot be assigned to type 'undefined' in the getServerSideProps function while using iron-session

"Using Node.js Express 4.4 to efficiently upload files and store them in a dynamically

The damping effect in three.js OrbitControls only activates when the mouse is pressed, however there is no damping effect once the

What could explain why the event listener functions properly on the initial call but fails on subsequent calls?

Loading images asynchronously in Next.js before the user arrives at the component displaying them

Getting the correct JSON field value from a JavaScript Promise object in the right way

Issue specifically with Android 6 WebView - jQuery 1.9.1 where a RangeError is thrown due to the call stack size being exceeded

The callback function for ajax completion fails to execute

Change Observable<String[]> into Observable<DataType[]>

PHP-generated HTML onclick attribute malfunctioning

Tips for modifying date format in Angular 8

Tips for implementing conditional app.use() in nestJS backend strategies?

Adjust size of item within grid component in VueJS

Having trouble simulating a custom Axios Class in JavaScript/TypeScript

How can I utilize the JQuery GetJSON function to retrieve HTML content from an external webpage?

Class for Eliminating the Background Image Using Bootstrap