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

时间:2018-07-15 07:02:46

标签: javascript aframe

我正在尝试从A-Frame生成屏幕截图,但一直出现此错误:

<div class="pn-ProductNav_Wrapper roller">
  <nav id="pnProductNav" class="pn-ProductNav dragscroll">
    <div id="pnProductNavContents" class="pn-ProductNav_Contents">
      <a href="#" class="pn-ProductNav_Link" aria-selected="true"><img src="Images\parents.png" heght="90" /></a>
      <a href="#" class="pn-ProductNav_Link"><img src="Images\student.png" width="60px" /></a>
      <a href="#" class="pn-ProductNav_Link"><img src="Images\teacher.png" width="60px" /></a>
      <a href="#" class="pn-ProductNav_Link"><img src="Images\student.png" width="60px" /></a>
      <span id="pnIndicator" class="pn-ProductNav_Indicator"></span>
    </div>
  </nav>
  <button id="pnAdvancerLeft" class="pn-Advancer pn-Advancer_Left" type="button">
						  	<svg class="pn-Advancer_Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 551 1024"><path d="M445.44 38.183L-2.53 512l447.97 473.817 85.857-81.173-409.6-433.23v81.172l409.6-433.23L445.44 38.18z" /></svg>
						  </button>
  <button id="pnAdvancerRight" class="pn-Advancer pn-Advancer_Right" type="button">
						  	<svg class="pn-Advancer_Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 551 1024"><path d="M105.56 985.817L553.53 512 105.56 38.183l-85.857 81.173 409.6 433.23v-81.172l-409.6 433.23 85.856 81.174z" /></svg>
						  </button>
</div>

这是测试代码:

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

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

1 个答案:

答案 0 :(得分:1)

当您尝试访问其成员函数时,屏幕快照组件尚未初始化。

尝试创建一个由您的代码组成的新组件:

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

HTML

<a-scene screenshot foo>

就像我一样here


您还可以监听a-scene s loaded事件,或者根据需要使用setTimeout()。