在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不是函數'錯誤。

謝謝 ：）

Answer 1

我不確定哪些部分會給你錯誤，
我已經將你的代碼復制到一個小提琴中，添加了3個coords，它正在工作 。

從你的代碼判斷，你有一個糟糕的場景引用，在它的框架中

this.el.sceneEl

假設this是任何實體，並且this.scene不引用場景。
此外，將three.js對象稱為object3D ，而不是Object3D

---

我只將三個.js對象創建放到一個aframe組件中：

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

並放置一個實體：

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

---

在添加之前，我還通過獲取場景參考來放置對象：

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