浏览器中的 3d 曲面图

Posted 2023-03-31

【中文标题】浏览器中的 3d 曲面图

【英文标题】：3d surface plot in browser

【发布时间】：2011-11-04 16:13:59

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

chrome-frame 可以作为要求吗？

好吧，我在想，某个论坛的一个人对使用 WebGL 的最佳方法做了一个很好的总结，chrome frame 被评估为与 IEWebGL 一样好的解决方案。我不能认为这很难，因为我需要一种无需安装的方法.. 抱歉 ;)

值得一试。 doesn't require admin rights 了，如果有帮助的话

【参考方案1】：

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

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

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

【讨论】：

这大致就是我的想法，尽管 excanvas.js 和 IEWebGL 确实有一点帮助。您能否推荐有关如何在此类 Flash 或 Java 组件中加载输入的工具和技巧？我关心的是如何从我的 python 中做到这一点..

我相信您可以使用 processing 的 loadStrings() 函数从同一站点上的 URL 加载内容。因此，您可以使用 python 以某种基于文本的格式为您的数据提供 API。

我正在更多地研究 processing.js，尽管这似乎意味着开发我自己的曲面图......知道是否有一个项目可以渲染接近我正在寻找的东西？

我不知道，但这并不意味着没有。 Processing 的优势在于自定义可视化，人们倾向于将其用于特殊项目。但这里可能有一些东西：processing.org/reference/libraries

作为结论，我没有使用任何这些技术。我正在用 Java 开发一个定制的小程序。我将留下入口点来指定从中获取各种数据的 url。我这样做是因为用 Java 开发很容易，在 Eclipse 等工具中调试也很容易，并且将 XML 扔到我的应用程序中很容易弄清楚。

【参考方案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 看起来也非常适合可视化！

【讨论】：

好吧，我发现 IEWebGL 在 IE7 上运行得非常好，查看这里的示例，有些非常好，但是挖掘代码并不好，缺少 cmets，但是网站仍然很年轻：iewebgl.com/

我认为最好的办法是弄清楚 json 是如何工作的，以及如何使用 HTTP GET 或 POST 请求从服务器中检索它。

【参考方案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++;
    

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

【参考方案4】：

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

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

【讨论】：

制作它的人没有添加对IE的支持，也许有隐藏的原因？

顺便说一句，我仍然没有解决方案。我暂时切换到 Java 小程序 + javascript 来处理事件。