浏览器中的 3d 曲面图

Question

我有一个 python web 服务器 (cherrypy)，我希望用户能够计算这种精确类型的某些表面。这是我能够从用户输入中生成的。他给了我一些参数，我计算我的东西，在服务器上将它生成为 PNG（matplotlib/numpy），然后通过 JQuery 加载发回。

问题是，这很蹩脚，而且表面可以有不同的方面。我希望能够拥有一个实际的小部件，或者这样可以让用户旋转他的表面......

我的主要限制是它必须在 IE 7 上工作（8 也很酷），并允许输入我以某种方式计算的数据。我在网上看到很多只允许输入参数函数的东西。我需要的是能够推送原始数据三元组。

我一直在研究一些东西，Javascript 会是最好的，但我没有看到 JQuery 或等效的东西。我确实在 WebGL 上看了很长时间，并开始实现一些东西......从头开始......但有时在 IE 中的行为太长而且随机。

也许我完全错过了一些与我的 python 兼容的技术或格式，但我花了几天时间才采用绘制成 PNG 的临时解决方案。

期待你们的阅读， 在此先感谢 ;)

Answer 1

据我所知，如果您需要 IE7 兼容性，那么 JS 中的大多数可用库都不适合您 - 它们需要 canvas 或 SVG 支持。剩下的是静态图像、Flash 或 Java 小程序。

我会研究processing，它具有良好的 3D 支持并且可以创建用于 Web 的 Java 小程序。请参阅 the 3D tutorials 了解交互式 3D 表面的优秀示例。

如果您想变得花哨，您还可以为支持canvas 元素的浏览器提供processing.js。这将避免为这些浏览器加载 Java 小程序，从而使 UI 更加流畅并消除对 Java 的依赖。您需要检查浏览器兼容性，然后加载小程序代码或 processing.js 代码。这样做的好处是您应该能够在两种情况下使用完全相同的处理代码。

Answer 2

让 python 脚本以 json 格式返回 3D 模型的顶点/点，然后使用 mrdoob 的 three.js 直接在浏览器中创建一个实时的、由 javascript 驱动的 3D webGL 模型。

在此处查看three.js：https://github.com/mrdoob/three.js

（看看那里令人惊叹的例子以获得灵感，您可能还可以获得 mrdoob 以获得见解......）

编辑：糟糕，刚刚注意到 IE7 的要求。 IE7 没有 webGL :(。您必须使用 Flash 进行 3D 渲染。或者让您的 python 脚本创建不同角度的视图，这些视图可以作为图像加载到浏览器中（例如，用户单击右键并且加载的下一个图像向右旋转一定角度）。

编辑：看起来 IEWebGL 将为 IE7 启用 webGL！

EIDT：processing.js 看起来也非常适合可视化！

Answer 3

我一直在寻找类似的东西（JS 中的等高线图）并且遇到了一个看起来可以在 IE6 中工作的东西（使用 excanvas）：http://code.google.com/p/javascript-surface-plot/

它使用 Google 可视化 API：

var data = new google.visualization.DataTable();
for (var i = 0; i < numCols; i++) {
    data.addColumn('number', 'col' + i);
}
data.addRows(numRows);
var d = 360 / numRows;
var idx = 0;
for (var i = 0; i < numRows; i++) {
    for (var j = 0; j < numCols; j++) {
        var value = (Math.cos(i * d * Math.PI / 180.0) * Math.cos(j * d * Math.PI / 180.0));
        data.setValue(i, j, value / 4.0);
        tooltipStrings[idx] = "x:" + i + ", y:" + j + " = " + value;
        idx++;
    }
}

所以也许你可以用你的三元组数据加载它。

Answer 4

您想使用 Pre3d。它不使用 WebGL。它使用画布元素。 这是它的例子http://www.graphycalc.com/

使用 explorecanvas 为 IE 添加画布支持。