Erstellen eines neuen Objekts in three.js

Question

Ich arbeite derzeit an einem Projekt, das 3Dobjects in Threejs basierend auf Datenbanken erstellt.

Ich habe bereits die Verbindung usw., aber es schlägt fehl, wenn ich versuche, ein neues Objekt zu erstellen.

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); 
} 

Dies ist nur ein Teil des Codes, ich weiß, es ist nicht das beste. Aber ich würde gerne arbeiten, bevor ich es reinige. Es wurde mit ES6 geschrieben.

Das Problem ist, dass wenn Sie den Code ausführen, erstellt es die Figur, die ich gerne haben würde.

Ein screengrab des Objekts, das durch den Code erstellt wurde.

Aber wenn ich versuche, es zu A-Frame hinzuzufügen (weil ich mit ihm gearbeitet habe), hält es mir den Fehler zu geben, dass ich nicht ein Objekt ohne Object3D zu der Szene hinzufügen oder ' this.updateMorphTargets ist keine Funktion '.

Wer hat irgendwelche Ideen?

PS Ich habe auch versucht, diese https://stackoverflow.com/a/31924233 Idee, aber das kommt mit der 'this.updateMorphTargets ist keine Funktion' Fehler zurück.

Thanks :)

Answer 1

Ich bin nicht sicher, welche Teile geben Sie den Fehler, habe
ich Ihr Code auf eine Geige kopiert, hinzugefügt 3 coords, und es ist working.

aus dem Code zu urteilen, haben Sie schlechte Szene Referenzen bekam, in einem Rahmen es

this.el.sceneEl 

vorausgesetzt this jede Einheit ist, und this.scene bezieht sich nicht auf die Szene. siehe
weiterhin Three.js Objekte als object3D, nicht Object3D

---

ich nur die three.js Objekterstellung auf eine aframe Komponente gesetzt haben:

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

und stellte eine Einheit:

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

---

auch habe ich die Aufgabe, indem sie die Szene Bezug gesetzt, vor der Zugabe:

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