在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://dev59.com/jo3da4cB1Zd3GeqP6u4q#31924233的方法，但返回“this.updateMorphTargets不是函数”的错误。

谢谢 :)

- Max

Answer 1

我不确定哪些部分导致了错误，
我将您的代码复制到一个代码片段中，添加了3个坐标，现在可以正常工作了。

从您的代码来看，您有错误的场景引用，在a-frame中应该是：

this.el.sceneEl

假设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)

- Piotr Adam Milewski

---

您真是位真正的英雄。我花了一些时间将其转换为我的现有代码，但现在它可以工作了！我确实不得不通过 document.body.innerHTML += <a-entity foo></a-entity> 手动添加<a-entity foo>部分，以便它可以与来自GET请求的坐标一起使用。但是，它能够工作就好！谢谢。 - Max