javascript 使用 SVG 或 WebGL 的 3D 形状
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6095139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
3D shapes using SVG or WebGL
提问by alter
Hi I want to render an interactive 3D sphere in browser. The texture on it will be of a world map, so basically I am trying to create a globe which is rotatable in any direction using map. I am comfortable in rendering 2D images using SVG but not sure how to render 3D shapes in SVG. Is it possible to render a 3D shape in SVG, if yes, how? If not, is WebGl a better option?
嗨，我想在浏览器中渲染一个交互式 3D 球体。它的纹理将是一张世界地图，所以基本上我正在尝试创建一个可以使用地图向任何方向旋转的地球仪。我很擅长使用 SVG 渲染 2D 图像，但不确定如何在 SVG 中渲染 3D 形状。是否可以在 SVG 中渲染 3D 形状，如果是，如何渲染？如果没有，WebGl 是更好的选择吗？
回答by brainjam
WebGL is your best bet because of performance. You might be able to leverage (or at least learn from) demos like http://www.chromeexperiments.com/globe(see http://data-arts.appspot.com/globe-search). There are also other globe demos at http://www.chromeexperiments.com.
由于性能，WebGL 是您的最佳选择。您可能能够利用（或至少从中学习）演示，例如http://www.chromeexperiments.com/globe（请参阅http://data-arts.appspot.com/globe-search）。http://www.chromeexperiments.com上还有其他地球仪演示。
回答by Erik Dahlstr?m
Have a look at three.jswhich abstracts the implementation a bit (comes with WebGL/SVG/Canvas backends).
看看three.js，它对实现进行了一些抽象（带有WebGL/SVG/Canvas后端）。
SVG is a 2d vector graphics format, but you can project 3d shapes onto 2d, so it's possible to render 3d objects with SVG, it's just a bit of work (best left to javascript libraries).
SVG 是一种 2d 矢量图形格式，但您可以将 3d 形状投影到 2d 上，因此可以使用 SVG 渲染 3d 对象，这只是一点工作（最好留给 javascript 库）。
回答by posfan12
If you use SVG then shading is going to be a problem. Proper shading is not really possible in SVG, though you might be able to fake it a few select circumstances. For 3D definitely use WebGL if you have more than a dozen or so polygons in the model.
如果您使用 SVG，那么阴影将是一个问题。在 SVG 中，正确的着色是不可能的，尽管您可以在一些特定的情况下伪造它。对于 3D，如果模型中有十多个多边形，一定要使用 WebGL。
回答by Nephast
You must transform all point with a projection USe this to change point2D(x,y) in point3D(x,y,z):
您必须使用投影变换所有点 使用此更改 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 }
}
Make sure, you have defined your origine point under the variable Xorig, Yorig, Zorig
确保您已经在变量 Xorig、Yorig、Zorig 下定义了起点
