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을 염두에두고 작성되었습니다.

코드를 실행하면 문제는 내가 원하는 그림을 생성한다는 것입니다.

코드에 의해 생성 된 객체의 screengrab입니다.

그러나 나는 (내가 전에 함께 일했기 때문에), 그것이 나에게 나는 장면이나 '으로 Object3D없이 객체를 추가 할 수없는 오류를주고 계속 A-프레임에 추가하려고하면 this.updateMorphTargets가 함수가 아닙니다. '

누구든지 아이디어가 있습니까?

추신 : 나는이 https://stackoverflow.com/a/31924233 아이디어를 시도했지만 'this.updateMorphTargets is not a function'오류가 다시 발생합니다.

감사합니다 :)

Answer 1

나는 부분이 당신에게 내가 바이올린에 대한 귀하의 코드를 복사 한
오류를 제공하는 확실하지 않다, 3 개 좌표를 추가, 그것은 working입니다. 귀하의 코드에서 판단

는, 당신은 프레임에이

this.el.sceneEl 

가정 this 어떤 실체, 그리고 this.scene 장면을 참조하지 않는 나쁜 장면 참조를 가지고있다.
게다가 Object3D

---

I 만 AFRAME 성분에 three.js를 오브젝트 생성을 추가했는지하지 object3D로 three.js를 오브젝트 참조 :

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

및 엔티티 위치 :

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

을

---

또한 추가하기 전에 장면 참조를 가져 와서 객체를 배치했습니다.

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