如何在IPython笔记本上运行带有WebGL画布的HTML5文档

how can I run HTML5 doc with WebGL canvas on IPython notebook

本文关键字：WebGL 文档 HTML5 行带 IPython 笔记本 运行      更新时间：2023-09-26
在这个

链接上有一个关于WebGL的很好的教程：

http://learningwebgl.com/blog/?p=571

我用这个例子作为这个问题的起点：

http://learningwebgl.com/lessons/lesson06/index.html

所以它在我的浏览器上运行得很好。我复制了源代码并需要图书馆：

 - glMatrix.html
 - webgl-utils.js

在我的电脑上。现在我可以在我的浏览器上再次很好地运行它们。

在源 html 中，这些库被称为外部库，如下所示：

<script type="text/javascript" src=".'glMatrix.js"></script>
<script type="text/javascript" src=".'webgl-utils.js"></script>

它们与我的源 html 位于同一目录中，即 kvBox.html。

现在我想从笔记本单元格中运行此 html。我输入：

from IPython.core.display import HTML
def putHTML():
    source = open("kvBox.html", "rb").read().decode()
    return HTML(source)

putHTML()

那里有相同的屏幕，没有盒子和画布。笔记本上的输出行上没有错误消息。

当我查看笔记本服务器控制台时，我看到以下错误：

[I 21:56:51.077 NotebookApp] 302 GET /notebooks/.%5CglMatrix.js?_=1454010913066
(::1) 15.64ms
[I 21:56:51.077 NotebookApp] Refusing to serve hidden file, via 404 Error
[W 21:56:51.077 NotebookApp] 404 GET /files/.%5CglMatrix.js (::1) 0.00ms referer
=http://localhost:8888/notebooks/Untitled4.ipynb?kernel_name=python3
[I 21:56:51.093 NotebookApp] 302 GET /notebooks/.%5Cwebgl-utils.js?_=14540109130
67 (::1) 0.00ms
[I 21:56:51.093 NotebookApp] Refusing to serve hidden file, via 404 Error
[W 21:56:51.093 NotebookApp] 404 GET /files/.%5Cwebgl-utils.js (::1) 0.00ms refe
rer=http://localhost:8888/notebooks/Untitled4.ipynb?kernel_name=python3

我已经用谷歌搜索并查看了将外部库包含在笔记本中的 SO。大多数情况下，我发现github上给出了noteook扩展。我需要为自己添加的解决方案。

最近的问题是这个项目：

如何在 Ipython 笔记本中添加外部 JavaScript 文件

所以我尝试对上述外部库使用 %%html 命令。输出行上没有 erro，但控制台上存在相同的拒绝错误。

编辑：

在阅读并尝试了许多不同的建议都不起作用之后，我有一个解决方法。我自己写了一个简单的包含例程。我将库代码合并到上面的"source"字符串中的源 html 中，一切正常。

URL 中的路径分隔符/不' 。请参阅文档。

您的浏览器似乎正在执行错误恢复，而 IPython 没有。

因此，您会收到 404 个错误/files/.%5CglMatrix.js（%5C是 URL 编码的 '），而不是 200 个 OK 的 /files/glMatrix.js 错误。

使用正确的网址。

我想

我找到了错误的根本原因。正如昆汀所指出的，这与反斜杠字符有关。但不在我的代码中。它位于处理程序代码中。我不确定它是在龙卷风端还是笔记本端，但在它收集路径信息的处理程序代码中，os.path.join 命令会创建反斜杠;对于python来说很正常，但对Javascript来说就不好了。

以下是我在原始龙卷风应用程序上创建的痕迹：

WARNING:tornado.access:404 GET /img%5Cbaseball.jpg (127.0.0.1) 0.00ms
handler_path:  ./images'BouncingBallDemo'baseball.jpg
app_path:  ./images'baseball.jpg
img_src:  /img'baseball.jpg

用正斜杠替换反斜杠后，我的代码在我的 Tornado 应用程序上运行良好。我相信类似的事情也发生在我原来的笔记本问题上。我不确定我自己是否能够有解决方法，我会检查。

相关文章：