Javascript 使用SVG或WebGL的三维图形

嗨，我想在浏览器中渲染交互式三维球体。它的纹理将是一个世界地图，所以基本上我试图创建一个地球是在任何方向旋转使用地图。我对使用SVG渲染2D图像很熟悉，但不知道如何在SVG中渲染3D形状。 是否可以在SVG中渲染3D形状？如果可以，如何渲染？如果不是，WebGl是一个更好的选择吗？

看看哪一个抽象了一点实现（附带WebGl/SVG/Canvas后端）

---

SVG是一种2d矢量图形格式，但您可以将3d形状投影到2d上，因此可以使用SVG渲染3d对象，这只是一点工作（最好留给javascript库）。

WebGL是您的最佳选择，因为它具有良好的性能。您可能能够利用（或至少从中学习）类似（请参阅）的演示。如果您使用SVG，那么着色将是一个问题。在SVG中，正确的着色实际上是不可能的，尽管在一些特定的情况下，您可能会伪造它。对于3D，如果模型中有十几个多边形，则一定要使用WebGL。

必须使用投影变换所有点 使用此选项更改point3D（x，y，z）中的point2D（x，y）：

//语言Javascript
//目标点
功能点（x、y、z）{
这个.x=x；
这个。y=y；
这个。z=z；
}
//投影转换点2D在3D中
函数投影点（点）{
如果（！（点的点实例）
抛出新类型错误（“ProjectionPoint:类型参数不正确”）；
return{x:（point.x
我想在浏览器中渲染一个交互式3D球体
-哪个浏览器？您要求它@atlavis，任何支持该解决方案的浏览器。拜托“SVG是一种2d矢量图形格式，但您可以将3D形状投影到2d”。我同意，但有可能使它们交互吗？我可以旋转我在svg中创建的3d球体吗？svg中的任何形状都可以交互，但svg本身并不知道某些形状表示3d对象。下面是一个简单的示例（带鼠标悬停处理程序的3d立方体）：这是最好的解决方案。它需要相当多的代码和一些OpenGL/GLSL/数学知识。这是一个非常关键的问题，对我来说，它使webGL不是更好的解决方案，而是唯一的解决方案。即使你设法把它拼凑在一起，你也会花更多的时间使它看起来甚至有点像乐高（更不用说在svg中正确工作-剪裁等），而不是您将花费额外的时间使webGL与svg匹配以实现交互性。@posfan12我正在寻找一个问题的帮助。搜索时，您是唯一对svg图形着色提出意见的人。请查看
  // 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  } 
 }