使用SVG或WebGL的3D形状

问题描述

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

解决方法

由于性能，WebGL是您最好的选择。您也许可以利用（或至少从中）http://www.chromeexperiments.com/globe之类的演示（请参阅http://data-arts.appspot.com/globe-search）。 http://www.chromeexperiments.com上还有其他Globe演示。     ,看一下three.js，它对实现进行了一些抽象（WebGL / SVG / Canvas后端附带）。 SVG是2d矢量图形格式，但是您可以将3d形状投影到2d上，因此可以使用SVG渲染3d对象，这只是一点工作（最好留给javascript库使用）。     ,如果您使用SVG，则阴影将成为问题。尽管在某些特定情况下您可以伪造SVG，但实际上不可能在SVG中进行适当的着色。对于3D，如果模型中有大约十几个多边形，则一定要使用WebGL。     ,您必须使用投影变换所有点 使用它来更改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下定义了起点