使用SVG或WebGL的3D形狀

嗨我想在瀏覽器中呈現交互式3D球體。它的紋理將是世界地圖，所以基本上我試圖創建一個可以使用地圖在任何方向旋轉的地球儀。我很喜歡使用SVG呈現2D圖像，但不知道如何在SVG中呈現3D形狀。是否可以在SVG中渲染3D形狀，如果是，如何？如果不是，WebGl是一個更好的選擇？使用SVG或WebGL的3D形狀

來源

2011-05-23 alter

'我想在瀏覽器中呈現交互式3D球體 - 哪個瀏覽器？ – atlavis 2011-05-23 10:38:04

你問了一下http://kathack.com/ – Ibu 2011-05-24 08:19:59

@atlavis，任何可以支持解決方案的瀏覽器.C'mon – alter 2011-05-25 10:03:26

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

來源

2011-05-26 03:42:10 brainjam

這是最好的解決方案。儘管它需要相當多的代碼和一些OpenGL/GLSL /數學知識。 – Artefact2 2011-05-26 05:14:10

看看three.js的一些抽象實現（自帶WebGL/SVG/Canvas後端）。

SVG是一種二維矢量圖形格式，但您可以將3d形狀投影到2D上，因此可以使用SVG呈現3D對象，這只是一點工作（最好留給JavaScript庫）。

來源

2011-05-24 08:17:21

「SVG是2D矢量圖形格式，但你可以將3D形狀投影到2D上」。我同意但可以讓他們互動？我可以旋轉我在svg中創建的三維球體嗎？ – alter 2011-05-25 10:05:16

svg中的任何形狀都可以是交互式的，但SVG本身並不知道某些形狀代表了3d對象。這裏有一個簡單的例子（帶有mouseover處理程序的3D立方體）：http://apike.ca/prog_svg_threed.html – 2011-05-26 07:10:29

如果你使用SVG，那麼陰影會成爲一個問題。適當的陰影在SVG中是不可能的，儘管你可能能夠僞裝它幾個選擇的情況。對於3D，如果模型中有十多個多邊形，則必須使用WebGL。

來源

2011-06-16 02:02:28 posfan12

這是一個關鍵點，對我來說，它使webGL不是更好的解決方案，而是唯一*解決方案。即使你設法將它們拼湊在一起，你也會花費更多的時間讓它看起來像sgg中的非lego（更不用說工作正常 - 裁剪等），而不是花費在做webGL匹配上的額外時間SVG交互性。 – 2012-12-17 13:01:47

@ posfan12我在尋找有關問題的幫助。搜索SO，你是唯一提供關於着色SVG圖形的意見的人。請看看http://stackoverflow.com/questions/13905255/how-to-change-color-of-a-composite-svg-oject – 2012-12-18 02:05:43

你必須用投影變換所有點用這個來的三維點（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

來源

2012-04-16 17:13:57 Nephast

使用SVG或WebGL的3D形狀

回答

相關問題