Jupyter Notebook 不包括 THREE.js答案

【问题标题】：Jupyter Notebook not including THREE.jsJupyter Notebook 不包括 THREE.js
【发布时间】：2018-01-13 21:32:09
【问题描述】：

我有以下 jupyter 笔记本单元格，fourd.js 和 r89dev.three.min.js 在与笔记本相同的目录中的 js 文件夹中：

%%html
<!doctype html>
<html>
    <head>
        <title>FourD.js Testbed</title>
        <script src="js/r89dev.three.min.js"></script>
        <script src="js/fourd.js"></script>
    </head>
    <body>
        <div id="display"></div>
        <script>
var CIRCLES = 100;
var CIRCLE_SIZE = 10;

fourd = new FourD();
fourd.init('#display', {width: 500, height: 350});
fourd._internals.camera.position.set(0, 0, -50);
var vertex1 = fourd.graph.add_vertex({size: 10, color: 0x000000});
var vertex2 = fourd.graph.add_vertex({size: 10, color: 0x000000});
var edge = fourd.graph.add_edge(vertex1, vertex2);

for(var i=0; i<CIRCLES; i++){
    vertex_options = [];
    for(var j=0; j<CIRCLE_SIZE; j++){
        vertex_options.push({size: 10, color: 0x000000});
    }

    fourd.graph.add_cycle(vertex_options);
}
        </script>
    </body>
</html>

我第一次尝试时它有效，但现在我收到一个错误，即未定义 THREE。这意味着它正在加载fourd.js 库，而不是three.js 库。我可能会错过什么？

我在笔记本中直接得到的错误如下：

Javascript error adding output!
ReferenceError: THREE is not defined
See your browser Javascript console for more details.

但是我在javascript控制台中找不到关于三个js未加载的相应错误消息。

【问题讨论】：

标签： javascript html jupyter-notebook jupyter

【解决方案1】：

TL;DR：删除 xxx.three.min.js 开头的 // three.js - http://github.com/mrdoob/three.js 注释

我不知道哪里出了问题，但是您看到 JavaScript strict mode prologue 和 cmets 之间存在干扰。

如果您尝试以下单元格：

%%html
<div id="log"></div>
<script>
/* set a to a */
var a="a";$("#log").append("a is set to "+a+"<br>");
try{asdfg=1;}catch(x){$("#log").append(x+"<br>");}
</script>
<script>
"use strict";
/* set b to b */
var b="b";$("#log").append("b is set to "+b+"<br>");
try{bsdfg=1;}catch(x){$("#log").append(x+"<br>");}
</script>
<script>
/* set c to c */
"use strict";
var c="c";$("#log").append("c is set to "+c+"<br>");
try{csdfg=1;}catch(x){$("#log").append(x+"<br>");}
</script>
<script>
$("#log").append("Checking things:<br>");
try{$("#log").append("a is "+a+"<br>");}catch(x){$("#log").append("a is nope: "+x+"<br>");}
try{$("#log").append("b is "+b+"<br>");}catch(x){$("#log").append("b is nope: "+x+"<br>");}
try{$("#log").append("c is "+c+"<br>");}catch(x){$("#log").append("c is nope: "+x+"<br>");}
</script>

，它会产生以下输出（用 Chrome、Firefox 和 IE 测试）：

a is set to a
b is set to b
ReferenceError: bsdfg is not defined
c is set to c
ReferenceError: csdfg is not defined
Checking things:
a is a
b is b
c is nope: ReferenceError: c is not defined

“x set to x”消息表明所有 a-b-c 块都运行良好，中间的两个 ReferenceErrors 表明 b 和 c 都在严格模式下运行，这也是意料之中的。
出乎意料的是，最后没有设置c，产生了第三个ReferenceError。

我无法解释 cmets 对 Jupyter 的重要性，但它们确实如此。 three.min.js 以注释行开头，然后它的行为类似于 c，保持未定义。 fourd.js 以"use strict"; 开头，开头的注释只有在那之后才有，并且有效。

这似乎是 Jupyter 独有的东西，因为即使嵌入此处，以下 sn-p 也可以正常工作：

<script>
    /* set a to a */
    var a="a";
    console.log("a is set to "+a);
    try{asdfg=1;}catch(x){console.log(x);}
</script>
<script>
    "use strict";
    /* set b to b */
    var b="b";
    console.log("b is set to "+b);
    try{bsdfg=1;}catch(x){console.log(x);}
</script>
<script>
    /* set c to c */
    "use strict";
    var c="c";
    console.log("c is set to "+c);
    try{csdfg=1;}catch(x){console.log(x);}
</script>
<script>
    try{console.log(a);}catch(x){console.log(x);}
    try{console.log(b);}catch(x){console.log(x);}
    try{console.log(c);}catch(x){console.log(x);}
</script>

（两个预期的ReferenceError-s显示为空{}-s，但它们在那里，并且所有a-b-c最后都正确设置）

【讨论】：

顺便说一句，如果没有安装 Jupyter 的人想要尝试，jupyter.org/try 是一个适合的地方。启动Python一，按[+]按钮添加单元格，粘贴内容，使用Ctrl+Enter求值。