javascript - 在 three.js 中创建一个新对象

Question

我目前正在从事一个项目，该项目涉及基于数据库在 Threejs 中制作 3D 对象。

我已经有了连接等，但是当我尝试创建一个新对象时它总是失败。

    this.type = 'CustomObject';
    let shape = new THREE.Shape();
    const maxSize = coords.reduce((prev, current) => (Math.abs(prev.value) > Math.abs(current.value)) ? prev : current); // max Size but Abs
    // console.log("Max size before check : "+ maxSize.value);
    //Check weither maxSize is positive or negative.
    let height = Math.abs(maxSize.value);

    shape.moveTo(0, 0);
    for (let i = 0; i < coords.length; i++) {
        // console.log(coords[i]);
        shape.lineTo(coords[i].id, coords[i].value);
    }

    shape.lineTo(coords[coords.length - 1].id, -height - 3);
    shape.lineTo(0, -height - 3);
    shape.lineTo(0, 0);
    // let geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
    let extrudeSettings = {
        steps: 4,
        amount: 20,
        bevelEnabled: false,
        bevelThickness: 1,
        bevelSize: 1,
        bevelSegments: 1
    };
    this.geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
    this.material = new THREE.MeshBasicMaterial({color: 0xCbcbcb});
    let object = new THREE.Mesh( this.geometry, this.material );
    this.createdGraph = object;
    console.log(this.createdGraph.Object3D);
    this.scene.add(this.createdGraph);
}

这只是部分代码，我知道这不是最好的。但我想在清洁它之前对其进行处理。 它是为 ES6 编写的。

问题是，如果您执行代码，它会创建我想要的图形。

代码创建的对象的屏幕截图。

但是如果我尝试将它添加到 A-Frame(因为我之前使用过它)，它会不断给我错误消息，即我无法将没有 Object3D 的对象添加到场景或 'this.updateMorphTargets不是函数 ' 。

有人有什么想法吗？

PS 我也试过这个 https://stackoverflow.com/a/31924233想法，但这会返回“this.updateMorphTargets is not a function”错误。

谢谢:)

Answer 1

我不确定是哪部分给你的错误，
我已将您的代码复制到 fiddle 中，添加了 3 个坐标，它是 working .

从您的代码来看，您的场景引用很糟糕，在框架中是

this.el.sceneEl

假设 this 是任何实体，并且 this.scene 不引用场景。
进一步将three.js对象称为object3D，而不是Object3D

---

我只将 three.js 对象创建放到一个框架组件中:

AFRAME.registerComponent("foo",{
  init:function(){
  //Your code here
  }
});

并放置一个实体:

<a-entity foo> </a-entity>

---

在添加之前，我还通过获取场景引用来放置对象:

this.el.sceneEl.object3D.add(object)