无法复制 THREE.Vector3

Question

我认为我的问题更多的是 javascript 继承问题而不是 Three.js 问题。

我对 javascript 中的继承不是很熟悉，所以经过一些教程后，我想到了 this snippet，但我不明白为什么它没有达到我的预期.

var MyClass = function() {

    THREE.PerspectiveCamera.apply(this, arguments);   

    // Here this.position is default value, (0,0,0)

    this.position = new THREE.Vector3(1,2,3);

    // this.position is unchanged, like if 
    // the previous affectation didn't do anything

}

MyClass.prototype = Object.create(THREE.PerspectiveCamera.prototype);
MyClass.prototype.constructor = MyClass;

var obj = new MyClass();

如果我删除继承，这会达到我期望的效果，而且我无法用 Three.js 对象以外的东西重现它。

我可能遗漏了什么，但我看不到什么。

你有什么想法吗？

谢谢！

Answer 1

javascript中支持继承的方式真的很复杂，如果你不想写几个月后你和你的朋友都看不懂的代码，那么你应该考虑另一种方法来解决你的问题。

我想到了围绕 THREE.PerspectiveCamera.prototype 的包装器构造函数：

var MyClass = function () {
    this.perspectiveCamera = new THREE.PerspectiveCamera(arguments);
    this.perspectiveCamera.position = new THREE.Vector3(1, 2, 3);
}

var instance = new MyClass();

这应该可以解决问题。

但如果您对原型概念感兴趣，这里有一些值得了解的信息：

将结构实例传递给原型意味着，该原型的所有实例都将引用结构的同一个实例
永远不要将原型设置为另一个原型的实例，因为这最终会包含一些结构（见上文）
最好的方法是遍历旧原型的所有成员（递归地）并将它们克隆到新原型。

进一步了解的一些链接：

https://developer.mozilla.org/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

http://snook.ca/archives/javascript/javascript_pass

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

Answer 2

您不能像现在这样为对象的位置分配新的 THREE.Vector3：

this.position = new THREE.Vector3( 1, 2, 3 );

如 this answer 中所述，Object3D 的 position、rotation、quaternion 和 scale 属性是不可变的。请改用 set() 方法。

this.position.set( 1, 2, 3 );

three.js r.71

无法复制 THREE.Vector3

Can't copy a THREE.Vector3

javascript

inheritance

three.js