浏览器中的3D曲面图

10 投票

4 回答

8545 浏览

提问于 2025-04-17 05:39

我有一个用Python写的网络服务器（cherrypy），我希望用户能够计算某种特定类型的表面。用户给我一些参数，我根据这些参数计算，然后在服务器上生成PNG图片（使用matplotlib和numpy），最后通过JQuery加载把图片发回给用户。

在这里输入图片描述

问题是，这样做太简单了，而且这些表面可以有很多不同的样子。我希望能有一个实际的工具，让用户可以旋转他们的表面...

我最大的限制是，这个工具必须能在IE 7上运行（IE 8也不错），并且能够以某种方式输入我计算的数据。我在网上看到很多东西只能输入参数方程。我需要的是能够输入原始数据三元组。

我考虑过很多方案，JavaScript是最好的选择，但我没找到合适的JQuery或类似的东西。我也花了很长时间研究WebGL，开始从零实现一些东西……但在IE中有时表现得很慢且不稳定。

也许我完全错过了某种技术或格式，它能和我的Python兼容，但我已经花了好几天时间，才决定暂时用PNG图像来解决问题。

期待你们的回复，提前感谢；)

canvas jquery data visualization image generation browser compatibility 3d graphics surface rendering webgl

4 个回答

我在找类似的东西（在JS中绘制轮廓图），然后发现了一个看起来可以在IE6上运行的例子（使用excanvas）：http://code.google.com/p/javascript-surface-plot/

它使用了谷歌的可视化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++;
    }
}

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

回答于 2025-04-17 由 Python大师

分享举报

让你的Python脚本返回3D模型的顶点或点，并以JSON格式输出。然后，使用mrdoob的three.js库，在浏览器中直接创建一个实时的、由JavaScript驱动的3D WebGL模型。

你可以在这里查看three.js: https://github.com/mrdoob/three.js

（那里有很多很棒的示例可以给你灵感，你也可以试着联系mrdoob获取一些见解……）

编辑：哎呀，我刚注意到IE7的要求。IE7不支持WebGL :(。你得用Flash来进行3D渲染。要不就是让你的Python脚本生成不同角度的视图，这样可以在浏览器中加载为图片（比如用户点击右键，接下来加载的图片就是向右旋转了一个特定角度的）。

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

编辑：processing.js在可视化方面也看起来很不错！

回答于 2025-04-17 由 Python大师

分享举报

据我所知，如果你需要兼容IE7，大部分现有的JavaScript库都不适用，因为它们需要支持canvas或者SVG。这样的话，你只能使用静态图片、Flash或者Java小程序。

我建议你可以看看processing，这个工具对3D支持很好，可以创建用于网页的Java小程序。你可以参考这些3D教程，里面有很多互动3D表面的好例子。

如果你想要更高级一点的功能，可以考虑为支持canvas的浏览器提供processing.js。这样就可以避免在这些浏览器上加载Java小程序，让用户体验更流畅，也不需要依赖Java。你需要检查浏览器的兼容性，然后根据情况加载小程序代码或者processing.js代码。这样做的好处是，你在两种情况下都可以使用完全相同的processing代码。

回答于 2025-04-17 由 Python大师

分享举报

浏览器中的3D曲面图

4 个回答

撰写回答