在three.js中創建一個新對象

我目前正在開發一個涉及基於數據庫在Threejs中製作3Dobject的項目。在three.js中創建一個新對象

我已經有了連接等，但是當我嘗試創建一個新的對象時它仍然失敗。

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

謝謝:)

來源

2017-10-14 Max

我不知道這件給你的錯誤，
我複製你的代碼到一個小提琴，加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)

來源

2017-10-14 16:10:07

你先生，是一個真正的英雄。我花了一段時間纔將它轉換爲我的激動碼，但它現在起作用了！我確實必須通過document.body.innerHTML + = 添加零件手冊，以便它可以與來自GET請求的座標一起使用。但嘿它有用！謝謝 – Max

在three.js中創建一個新對象

回答

相關問題