在浏览器中的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小程序。

我会研究处理 ，它具有良好的3D支持，可以创建用于Web使用的Java小程序。 有关交互式3D表面的良好示例，请参阅3D教程 。

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

Answer 2

我正在寻找类似的东西（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 3

让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 4

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

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