將OBJ數據轉換爲CSS3D

我發現了很多公式，但沒有，但3D並不是我的專長，所以我不知道具體使用什麼。我的目標是將3D .obj文件（頂點，法線，面）中的數據轉換爲CSS3D（寬度，高度，旋轉X，Y，Z和/或類似變換）。將OBJ數據轉換爲CSS3D

例如2簡單平面

g plane1 
# simple along along Z axis 
v 0.0 0.0 0.0 
v 0.0 0.0 1.0 
v 0.0 1.0 1.0 
v 0.0 1.0 0.0 

g plane2 
# plane rotated 90 degrees along Y-axis 
v 0.0 0.0 0.0 
v 0.0 1.0 0.0 
v 1.0 1.0 0.0 
v 1.0 0.0 0.0 

f 1 2 3 4 
f 5 6 7 8

可以把該數據被轉換成：

#plane1 { 
    width: X; 
    height: Y; 
    transform: rotateX(Xdeg) rotateY(Ydeg) rotateZ(Zdeg) translateZ(Zpx) 
} 

#plane2 { 
    width: X; 
    height: Y; 
    transform: rotateX(Xdeg) rotateY(Ydeg) rotateZ(Zdeg) translateZ(Zpx) 
} 

/* Or something equivalent such as transform: matrix3d() */

核心問題是如何獲得X 4點平面/ Y/Z旋轉從它的x，y，z座標矩陣？

更新＃1 - 12年11月12日 因此，基於提供的答案，我已經遇到沒有優化的功能從下面http://www.euclideanspace.com/maths/geometry/rotations/conversions/matrixToEuler/index.htm：

/* 
    -v 0.940148 -0.847439 -1.052535 
    -v 0.940148 -0.847439 0.947465 
    -v -1.059852 -0.847439 0.947465 
    -v -1.059852 -0.847439 -1.052535 
    -v 0.940148 1.152561 -1.052534 
    -v 0.940147 1.152561 0.947466 
    -v -1.059852 1.152561 0.947465 
    v -1.059852 1.152561 -1.052535 

    f 1 2 3 4 
    f 5 8 7 6 
    f 1 5 6 2 
    f 2 6 7 3 
    f 3 7 8 4 
    f 5 1 4 8 
*/ 

var f = { 
    'm00' : 0.940148, 
    'm01' : -0.847439, 
    'm02' : -1.052535, 
    'm10' : 0.940148, 
    'm11' : -0.847439, 
    'm12' : 0.947465, 
    'm20' : -1.059852, 
    'm21' : -0.847439, 
    'm22' : 0.947465 
} 

// Assuming the angles are in radians. 
if (f.m10 > 0.998) { // singularity at north pole 
    heading = Math.atan2(f.m02, f.m22); 
    attitude = Math.PI/2; 
    bank = 0; 
} else if (f.m10 < -0.998) { // singularity at south pole 
    heading = Math.atan2(f.m02,f.m22); 
    attitude = -Math.PI/2; 
    bank = 0; 
} else { 
    heading = Math.atan2(-f.m20, f.m00); 
    bank = Math.atan2(-f.m12, f.m11); 
    attitude = Math.asin(f.m10); 
}

我得到的結果，但我我不確定我的計算是否正確，而且我也對與哪個軸相對應的問題獲得了混合響應。是前進= y，銀行= x，態度= z？如果這很重要，我也將每個轉換成度。

來源

2012-11-09 Don Boots

可能重複的角度：http://stackoverflow.com/ question/11137591/matrix-to-eulerangles – FlavorScape

你測量過性能嗎？根據隨機輸入值，用所需數量的css3d轉換進行基準測試。如果它滯後於目標機器，那麼你的工作將浪費時間。平均obj文件包含大量的面孔。 – JAre

這不是一個性能問題。它歸結爲我公認的不正確的數學。正在使用的OBJ文件是專門用CSS3D創建的，因此它們將具有最小量的多邊形。 –

enter image description here

閱讀本http://www.songho.ca/opengl/gl_matrix.html它解釋幾乎一切並沒有實現。

除此之外，CSS 3D解決方案的性能（數量級）會降低，主要是因爲表示曲面的每個pice都是DOM元素，所以它也非常有限 - 您可以找到有關此問題的很多材料（例如Google IO記錄）

如果你需要聲明的三維框架你可能想看看x3dom

吸引你只需要包含x3dom JS腳本一個3D框，並在頁面中嵌入此聲明：

<body> 
    <h1>Hello X3DOM World</h1> 
    <x3d width="400" height="300"> 
    <scene> 
     <shape> 
     <box></box> 
     </shape> 
    </scene> 
    </x3d> 
</body>

它會解析你的頁面上的<x3d>標籤並生成合適的WebGL或Flash實現，並具有良好的性能。

x3d可以從Blender，Maya和3ds Max中導入資源。下面是一些良好的閱讀：x3domIntroTutorial.pdf

IE 11將支持WebGL和IE10將自動更新到IE 11所以只有不支持的桌面瀏覽器（默認禁用）將Safari瀏覽器。蘋果將被迫默認啓用它。憑藉全面的桌面支持，獲得完整手機並不需要太長時間，因爲它是極具競爭力的市場。我們有像three.js這樣的高度可訪問的WebGL框架。因此，有沒有感覺與CSS 3D

UPDATE這樣做：iOS的Safari瀏覽器8將默認啓用WebGL的支持：http://caniuse.com/webgl

矩陣的歐拉

來源

2012-11-10 07:52:36 JAre

感謝您的更新。我通常是這些技術的後期採用者，但上面的信息足以讓我開始走上更加正確的道路。 –

@DonBoots 3D框架允許您儘可能平滑地進行此轉換。在這一點上，這個星球上沒有人可以知道關於3D圖形的一切，它太大太深了。但有了好的工具集，您可以逐漸學習新事物，並在某些複雜情況下依賴框架的默認行爲。 – JAre

將OBJ數據轉換爲CSS3D

回答

相關問題