在浏览器中的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小程序。有关交互式3D表面的良好示例，请参阅the 3D tutorials。

如果您想获得幻想，您可能还会为支持canvas元素的浏览器提供processing.js。这将避免为这些浏览器加载Java小程序，从而使UI更加平滑并消除Java依赖性。您需要检查浏览器兼容性，然后加载applet代码或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 Visualization 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。它使用canvas元素。 这是它的例子http://www.graphycalc.com/

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