jQuery .html()方法未生效：Three.js渲染出现undefined及重复渲染问题

问题1：渲染区域上方出现undefined文本的原因 #

编辑器执行用户代码时，默认会将整段代码最后一个表达式的执行结果输出到渲染区域顶部。你提供的第一段代码最后一行是animate()调用，animate函数没有显式声明返回值，JavaScript中这类函数执行后默认返回undefined，这个值被编辑器输出到渲染区，就出现了你看到的undefined文本。

问题2：替换div内容后仍新增渲染实例的原因 #

该问题由两个核心疏漏导致：

• 未清理上一次执行生成的动画循环：每次运行代码都会通过requestAnimationFrame启动一个独立的渲染循环，调用.html()仅能清除容器内的DOM节点，不会销毁后台运行的动画任务，旧的渲染循环会一直持续执行。
• 每次运行都新建完整Three.js实例：每次执行代码都会重新创建Scene、Camera、WebGLRenderer实例，新生成的canvas元素会被再次挂载到页面。如果你代码中是直接将canvas挂载到document.body而非编辑器的结果容器，那清理结果容器的操作根本不会影响到之前挂载到body上的旧canvas，多个渲染实例共存的现象会更明显。

内容的提问来源于stack exchange，提问作者Prateek p