使用SVG或WebGL创建3D形状

Question

你好，我想在浏览器中呈现一个交互式的3D球体。它上面的纹理将是世界地图，因此基本上我正在尝试创建一个可以使用地图在任何方向上旋转的地球仪。我熟悉使用SVG渲染2D图像，但不确定如何在SVG中渲染3D形状。 如果可能，在SVG中呈现3D形状吗？如果不能，WebGL是更好的选择吗？

- alter

---

我想在浏览器中呈现一个交互式的3D球 - 使用哪个浏览器？ - atlavis

你要求了这个：http://kathack.com/ - Ibu

可以支持这个解决方案的任何浏览器都可以。加油！ - alter

Answer 1

请看一下three.js，它可以将实现进行抽象（带有WebGL/SVG/Canvas后端）。

SVG是一个二维矢量图形格式，但是您可以将三维形状投射到二维平面上，因此可以使用SVG渲染三维对象，只需要一些工作量（最好使用JavaScript库实现）。

- Erik Dahlström

---

SVG是一种二维矢量图形格式，但可以将三维形状投影到二维上。我同意，但是否可能使它们互动？我能旋转在SVG中创建的3D球体吗？ - alter

SVG中的任何形状都可以是交互式的，但SVG本身并不知道某些形状代表3D对象。这里有一个简单的例子（带有鼠标悬停处理程序的3D立方体）：http://apike.ca/prog_svg_threed.html - Erik Dahlström

Answer 2

由于性能问题，WebGL 是您的最佳选择。您可以利用（或至少从中学习）像 http://www.chromeexperiments.com/globe（请参见 http://data-arts.appspot.com/globe-search）这样的演示文稿。此外，还有其他地球仪演示文稿可在 http://www.chromeexperiments.com 上找到。

- brainjam

---

这是最好的解决方案。但需要相当多的代码和一些OpenGL/GLSL/数学知识。 - Artefact2

Answer 3

如果你使用SVG，那么阴影将是一个问题。在SVG中，真正的阴影并不是很可能实现的，尽管在一些特定情况下可以通过伪造来实现。如果模型中有超过十几个多边形，请一定使用WebGL进行3D渲染。

- posfan12

---

这是一个非常关键的点，对我来说它使得webGL不仅是更好的解决方案，而且是唯一的解决方案。即使你设法将其拼凑在一起，你会花费更多的时间让它看起来稍微不像乐高积木（更不用说正常工作-裁剪等）在SVG中，比你花费额外的时间让webGL与SVG匹配以实现交互所需的时间还要多。 - Thomas Browne

@posfan12 我需要帮助解决一个问题。我在 Stack Overflow 上搜索时，您是唯一一位提供有关如何着色 SVG 图形的意见的人。请看一下以下链接：http://stackoverflow.com/questions/13905255/how-to-change-color-of-a-composite-svg-oject - Matt Stevens

Answer 4

您必须使用投影来转换所有点。使用以下方法将点2D（x，y）转换为点3D（x，y，z）：

  // 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下。

- Nephast