在 Jupyter Lab (Python) 中嵌入 A-Frame 场景？

Question

我试图在 Jupyter 笔记本中的 JupyterLab 中显示一个 A-Frame 场景，来自 Python 代码。但是我找不到路。场景可以是这样的（只是简单的一个）：

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js" 
  </head>
  <body>
    <div id="aframe" style="width: 300px; height: 300px">
type="text/javascript"></script>
      <a-scene embedded>
        <a-box position="0 0 -4" color="red"></a-box>
      </a-scene>
    </div>
  </body>
</html>

我在阅读一些参考资料后尝试使用：

import IPython
IPython.display.HTML('<script src="https://aframe.io/releases/1.2.0/aframe.min.js" type="text/javascript"></script>')
aframe = '''<div id="aframe" style="height: 300px">
<a-scene embedded>
<a-box position="0 0 -4" color="red"></a-box>
</a-scene>
</div>'''
IPython.display.HTML(aframe)

我得到一个蓝色单元格，带有“JupyterLab”标签，并加载点（类似于 A-Frame 场景加载），永远。如果我查看控制台，我会读到：

A-Frame:warn Put the A-Frame <script> tag in the <head> of the HTML *before* the scene to ensure everything for A-Frame is properly registered before they are used from HTML.

Uncaught Error: A a-node type is already registered
    Aframe 18

由于警告是关于在 header 中注入脚本，在阅读 this reference 后，我写道：

%%javascript
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//aframe.io/releases/1.2.0/aframe.min.js';
    document.head.appendChild(script);
    console.log(window.AFRAME);

然后，在另一个单元格中：

import IPython
aframe = '''<div id="scene" style="height: 300px">
<a-scene embedded>
<a-box position="0 0 -4" color="red"></a-box>
</a-scene>
</div>
'''
IPython.display.HTML(aframe)

奇怪的是，当我第一次运行笔记本中的这两个单元格时，它就起作用了。但是，如果我关闭 Jupyter 内核，再次启动它，然后用这两个单元加载同一个笔记本，我会再次获得蓝色单元（甚至没有运行连接单元）。如果我查看 HTML 页面中的 head 元素，就会发现 A-Frame 脚本元素在那里。但是如果我运行（在另一个单元格中）：

%%javascript
    console.log(window.AFRAME)

我在控制台中得到 undefined。

我有点没思路了。也许与脚本（A-Frame 和 Jupyter 脚本）的加载顺序有关？

我正在使用 Firefox，以防万一。

有什么想法吗？

Answer 1

感谢@krassowski 的评论，这里我们有一些有效的代码：

from urllib.parse import quote
import IPython

content = quote(
        """
        <html>
            <head>
                <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
            </head>
            <body>
                <a-scene embedded>
                    <a-box position="0 0 -4" color="red"></a-box>
                </a-scene>
            </body>
        </html>
        """,
        safe=''
    )
html = """
    <iframe
        width="400"
        height="300"
        src="data:text/html;charset=UTF-8,{content}"
    ></iframe>
    """.format(content=content)
IPython.display.HTML(html)

在 Jupyter Lab 单元格中运行时会产生此输出：

在 Jupyter Lab (Python) 中嵌入 A-Frame 场景？

Embedded A-Frame scene in Jupyter Lab (Python)?

python

jupyter-notebook

jupyter

aframe

jupyter-lab