Javascript 继承与 Three,js

Question

这可能是一个 three.js 问题，但我认为更有可能的是我仍然没有正确理解原型继承。这是我的代码 - 有点简化：

    define( ["jquery", "three", "svgUtils", "views/walls", "floor", "scene", "furniture"], function ( $, THREE, SvgUtils, Walls, Floor, scene, Furniture ) {


    function Section (svgNode) {

        if (!(this instanceof Section)){
            throw new TypeError("Constructor cannot be called as a function");
        }

        this.svgNode = svgNode;
        this.name = svgNode.id.replace("section-", "");



        if (this.name == "first") {
            this.position.y = 100;
        }
    }

    Section.prototype = new THREE.Object3D();
    Section.prototype.constructor = Section;

    return Section;

});

这是一个 require.js 模块，我在其中定义了一个 Object3D 部分。然后，我使用 new Section(svgNode) 创建了两个部分 - 虽然只有其中一个的名称为 "first"，但它们的 y 位置都设置为 100。这是为什么？

更新

感谢 HMR，我现在很确定这是一个继承问题。以下是我如何根据包含墙壁和地板的 xml 数据创建建筑物的一个部分（即地板）：

define( ["jquery", "three", "svgUtils", "views/walls", "floor", "scene", "furniture"], function ( $, THREE, SvgUtils, Walls, Floor, scene, Furniture ) {
    function Section (svgNode) {

        if (!(this instanceof Section)){
            throw new TypeError("Constructor cannot be called as a function");
        }

        THREE.Object3D.call(this);

        this.svgNode = svgNode;
        this.name = svgNode.id.replace("section-", "");
        this.wallsNode = $(svgNode).find('[id*="walls"]');
        if (this.wallsNode.length == 0) {
                throw new Error("Section missing walls node")
        }
        this.walls = new Walls(this.wallsNode);     
        this.add(this.walls);
        this.add(new Floor($(svgNode).find('[id*="floor"]')));

        if (this.name == "first") {
            this.position.y = 100;
        }

    }

    Section.prototype = Object.create(THREE.Object3D.prototype);
    Section.prototype.constructor = Section;

    return Section;

});

如果我创建底层并将其添加到场景中，如下所示：

sections[0] = new section(sectionsXml[0]); scene.add(sections[0]);

我将底层添加到场景中 - 这是我所期望的。

但是，如果我同时创建一楼和二楼，但只添加一楼，如下所示：

sections[0] = new section(sectionsXml[0]); sections[1] = new section(sectionsXml[1]); scene.add(sections[0]);

一楼也包含一楼的墙壁（向美国道歉 - 在这里我们称一楼以上的楼层为 'first' 楼层 - 这是欧洲的东西）。

这就像在我 new section(sectionsXml[1]); 时调用了 sections[0] 的构造函数，但我不明白这是怎么回事。

Answer 1

 function Section (svgNode) {
   THREE.Object3D.call(this);
    ...
 Section.prototype = Object.create(THREE.Object3D.prototype);
 Section.prototype.constructor = Section;

有关原型和构造函数作用的更多信息，请点击此处：Prototypical inheritance - writing up

Javascript 继承与 Three,js

Javascript inheritance with Three,js

javascript

three.js