2017-08-15 52 views
6

我想知道是否有方法獲取通過3dio.js插入的模型的邊界框,或者計算其中心點?我正在尋找他們的原點。獲取模型的邊界框或中心

下面的圖片顯示了與紅色框指示的場景原點相關的兩個模型。

3D-Model_1

3D-Model_2

回答

6

可以訪問3d.io實體的three.js所對象是這樣的:

var threeElem = document.getElementById("custom-id").components['io3d-data3d'].data3dView.threeParent 

然後你可以使用從three.js所本地邊框:

var bbox = new THREE.Box3().setFromObject(threeElem) 

像這樣你可以得到最小/最大範圍whi你可以用它來確定原點。

我希望能回答你的問題。讓我知道!

編輯: 傢俱,很可能會基於Madlaina的回答

var threeElem = document.getElementById("custom-id").components['io3d-furniture'].data3dView.threeParent 
+1

作品十分感謝,只是一個小錯字。 'Data3dView'應該是'data3dView'。 這是我最初嘗試過的,但它沒有工作,因爲模型尚未加載。這是通過聽「模型加載」事件來解決的。 我將在下面添加我的解決方案作爲答案,供其他人蔘考。 –

+0

非常感謝。我在我的回答中修復了錯字:) –

4

。我需要確保該模型前

addModelToScene(type) { 

    let scene = document.querySelector('a-scene'); 
    let model = document.createElement('a-entity'); 
    model.setAttribute('io3d-data3d', getModelKey(type))  

    model.addEventListener('model-loaded',() => { 
     // Access the three.js object of the 3d.io 
     let threeElem = model.components['io3d-data3d'].data3dView.threeParent 

     // create the bounding box 
     let bbox = new THREE.Box3().setFromObject(threeElem) 

     // Calculate the center-point offsets from the max and min points 
     const offsetX = (bbox.max.x + bbox.min.x)/2 
     const offsetY = (bbox.max.y + bbox.min.y)/2 
     const offsetZ = (bbox.max.z + bbox.min.z)/2 

     // apply the offset 
     model.setAttribute('position', {x:-offsetX,y:-offsetY, z:-offsetZ}) 
    }); 

    scene.appendChild(model);  

} 

結果加載: Centered 3D-Model

+0

很酷!很高興它的作品!我一定會在自己的草稿中使用它 –