使用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形状

回答

相关问题