如何扩展构造函数的三个网类

Question

我正在使用三个。我正在尝试使构造函数功能构建行星和卫星，这是我到目前为止一直在尝试的方法，但我遇到了一个错误：

setShadow（）不是一个函数：

var body = function(size, color) {
  this.sphere = new THREE.Mesh(new THREE.SphereGeometry(size, 32, 32), 
                               new THREE.MeshLambertMaterial({color:color}))
  return this.sphere
}
body.prototype = Object.create(THREE.Mesh.prototype);
body.prototype.constructor = body;
body.prototype.setShadow = function() {
  this.sphere.castShadow = true
  this.sphere.receiveShadow = true
}

另外，我尝试使用THREE.MESH.call(this, geometry, material)，其中THREE.SphereGeometry = geometry和THREE.MeshLambertMaterial = material在构造函数函数之外定义。这特别是我需要担心三个。

编辑：替代尝试 ->

var body = function() {
      THREE.Mesh.call(this)
      return this
    }
    body.prototype.setShadow = function() {
      this.castShadow = true
      this.receiveShadow = true
      return this
    }
    body.prototype = Object.create(THREE.Mesh.prototype);
    body.prototype.constructor = body;
    var example = new body(new THREE.SphereGeometry(70, 32, 32), new THREE.MeshLambertMaterial({color:this.getRandColor()}))

似乎一切都正确继承了，但是我很困惑为什么setShadow函数无法正常工作？

编辑2：尝试.call(this)时实际遇到了此错误：

this.updatemorphtargets不是函数

Answer 1

在扩展THREE.Mesh类时，您在构造函数中犯了一个错误。

尝试这样：

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;

由于创建的对象将自动返回，因此无需返回构造函数中的任何内容。

和在您的setShadow方法中，您应该简单地指向 this，因为属性castShadow和receiveShadow是您新创建的Body类的直接属性（从THREE.Object3D通过THREE.Mesh继承。

）。

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

最好将Capitals用于构造函数的第一个字符，因此在我的代码中，我将body更改为Body。确保您将所有其他参考重命名。

在这里，小提琴中的演示

Answer 2

如果使用此功能"方法您将获得此错误：

未访问的typeerror：如果没有" new"''

现在实施它的最佳方法是使用类。这样：

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>