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

Question

我目前正在开发一个涉及基于数据库在Threejs中制作3Dobject的项目。

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

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，这是working。

从你的代码来看，你已经得到了恶劣的现场引用，在帧是

​​

假设this是任何实体，且this.scene并非指现场。
此外指three.js所对象作为object3D，不Object3D

---

我只把three.js所创建对象到AFRAME部件：

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

并置于一个实体：

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

---

此外，我已经通过获取现场参考放置对象，然后添加：

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