使用SVG或WebGL的3D形狀

Question

嗨，我想在瀏覽器中渲染交互式3D球體。 它上面的紋理將是世界地圖，所以基本上我正在嘗試創建一個可以使用地圖在任何方向旋轉的地球儀。 我很樂意使用SVG渲染2D圖像，但不確定如何在SVG中渲染3D形狀。 是否可以在SVG中渲染3D形狀，如果是，如何？ 如果沒有，WebGl是更好的選擇嗎？

Answer 1

由於性能，WebGL是您最好的選擇。 您可以利用（或至少從中學習）演示，例如http://www.chromeexperiments.com/globe （請參閱http://data-arts.appspot.com/globe-search ）。 http://www.chromeexperiments.com上還有其他全球演示。

Answer 2

看看有些抽象實現的three.js （附帶WebGL / SVG / Canvas后端）。

SVG是一種2D矢量圖形格式，但你可以將3d形狀投影到2d上，因此可以用SVG渲染3d對象，這只是一些工作（最好留給javascript庫）。

Answer 3

如果你使用SVG，那么着色將成為一個問題。 SVG中不能實現正確的着色，盡管您可以在幾種選擇的情況下偽造它。 對於3D，如果模型中有十幾個多邊形，則肯定使用WebGL。

Answer 4

你必須使用投影轉換所有點，使用它來改變point3D（x，y，z）中的point2D（x，y）：

  // Language Javascript

  // object Point 

  function Point(x,y,z){
    this.x = x;
    this.y = y;
    this.z = z; 
  }

 // Projection convert point 2D in 3D

  function ProjectionPoint(point){
    if ( !(point instanceof Point) )
    throw new TypeError("ProjectionPoint: incorrect type parameter");

    return { x: (point.x<<8)/(point.z+Zorig)+Xorig, 
             y: (point.y<<8)/(point.z+Zorig)+Yorig, 
             z:point.z  } 
 }

確保您已在變量Xorig，Yorig，Zorig下定義了原點