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，因此可以使用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

下定义了您的原点

使用SVG或WebGL的3D形状

4 个答案: