javascript - 通过注视按钮在 Aframe 中进入 VR
问题描述
我启用了 vr-mode-ui,我想在我的框架场景中有一个按钮,通过单击进入 vr 模式。我的问题是我的 js 给了我一个 TypeError: document.getElementById(...) is null 我不知道为什么!
<script>
AFRAME.registerComponent('enter', {
init: function () {
}
});
document.getElementById('startbutton').addEventListener("click", (e)=>{
scene.enterVR(true);
});
</script>
<a-scene id="scene" antialias="true"; cursor="rayOrigin: mouse" vr-mode-ui="enabled: true">
<a-assets>
<img id="startscreen" src="start_overlay.png">
</a-assets>
<!-- Environment -->
<a-sky id="environment" radius="9" rotation="0 -90 0"; material="shader: flat; src: #xxx"></a-sky>
<!-- Camera + cursor + Startscreen + Interaction-->
<a-entity look-controls>
<a-entity id="start">
<a-plane id="startbutton" class="link"; height="0.5"; width="5"; position="0 -0.7 -2" rotation="0 0 0" color="#ffbff0">
<a-text align="center" value="START" width="10" color="#e143a1"></a-text>
</a-plane>
</a-entity>
<a-entity id="cam" camera rotation="0 0 0" mouse-cursor>
<a-cursor id="cursor" color="red"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__1="_event: mouseenter; color: white"
event-set__2="_event: mouseleave; color: red"
fuse="true"
raycaster="objects: .link"></a-cursor>
</a-entity>
</a-entity>
</a-scene>
我不t know why my button isn
被 js-script 识别!
有人可以帮忙吗,拜托!干杯,可以
解决方案
执行代码时,按钮可能不会出现在 DOM 中。要么:
1) 将代码放入 AFRAME 组件中,
2) 将代码放在 HTML 正文之后,或者
3) 将其放在window.onload
回调中:
window.onload = function() {
doSomething();
};
此外,正如您在文档中看到的那样,正确的方法是调用
enterVR()
, 或exitVR()
在场景元素上。确保scene
您使用的引用实际包含场景元素。
推荐阅读
- javascript - 日期不起作用 - setFullYear 中的标记值
- reactjs - 没有时区的 React Material UI Datepicker
- html - HTML5 原生输入 type="time" 元素,如何在 Chrome 中定位伪元素/样式下拉菜单?
- reactjs - 是否可以在 react-konva Transformer 中使用图标作为旋转器
- websphere - WebSphere - 转储生成系统信号与服务器脚本
- arrays - 利用 PySpark,确定数组列中有多少元素包含在另一列中的数组数组中
- javascript - 有谁知道一个基本的 javascript 日历?
- javascript - Vuetify.js Datepicker 为数组中的每个 datepicker 设置允许的日期
- flutter - 提供者登录注销颤动
- linux - 使用 Sed 或 awk 从 curl 响应中解析 JSON 并分配给变量以供以后使用