生成 A-Frame 屏幕截图时出现 JavaScript 错误答案

【问题标题】：JavaScript error when generating A-Frame screenshots生成 A-Frame 屏幕截图时出现 JavaScript 错误
【发布时间】：2018-12-23 01:42:30
【问题描述】：

我正在尝试从 A-Frame 生成屏幕截图，但不断收到此错误：

TypeError: document.querySelector(...).components.screenshot is undefined

这是测试代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene screenshot="width: 640; height: 320">
      <a-entity id="box" geometry="primitive: box; width: 1; depth: 1; height: 1" position="-1 0.5 -3" rotation="0 45 0" material="color: #4CC3D9"></a-entity>
      <a-entity id="sphere" geometry="primitive: sphere; radius: 1.25" material="color: #EF2D5E" position="0 1.25 -5"></a-entity>
      <a-entity id="cylinder" geometry="primitive: cylinder; radius: 0.5; height: 1.5" position="1 0.75 -3" material="color: #FFC65D"></a-entity>
      <a-entity id="plane" position="0 0 -4" rotation="-90 0 0" geometry="primitive: plane; width: 4; height: 4" material="color: #7BC8A4"></a-entity>
      <a-entity id="sky" geometry="primitive: sphere; radius: 100" material="color: #ECECEC; shader: flat; side: back"></a-entity>
    </a-scene>

    <script>
      document.querySelector('a-scene').components.screenshot.capture('perspective')
    </script>
  </body>
</html>

这行 JavaScript 来自官方文档： https://aframe.io/docs/0.8.0/components/screenshot.html

这是 A-Frame 源代码： https://github.com/aframevr/aframe/blob/master/src/components/scene/screenshot.js

【问题讨论】：

尝试为 screenshot.js 添加一个 src=
感谢您的建议，但查看aframe.io/releases/0.8.0/aframe.js 的屏幕截图组件（位于底部）已包含在内。

标签： javascript aframe

【解决方案1】：

当您尝试访问其成员函数时，屏幕截图组件尚未初始化。

尝试创建一个包含您的代码的新组件：

AFRAME.registerComponent("foo", 
  init: function() {
    document.querySelector('a-scene').components.screenshot.capture('perspective')
  }
})

HTML

<a-scene screenshot foo>

就像我做的here

您还可以侦听a-scenes loaded 事件，或者根据需要使用 setTimeout()。

【讨论】：