Javascript 在Aframe AR.js中，显示一个预加载屏幕，直到加载并渲染所有资源
我想显示一个预加载屏幕，直到所有资源加载和渲染 我尝试使用事件加载的资产，但它不起作用。当我们增加3d模型、图像和视频时，这些资产几乎为50-60mb。因此，加载资产和扩充需要时间。如果网络速度较慢（在“检查网络”选项卡中选择“我们测试的3G慢速”），则当我们增强4-8秒时，会出现并播放黑屏视频。 请编辑Javascript 在Aframe AR.js中，显示一个预加载屏幕，直到加载并渲染所有资源,javascript,augmented-reality,aframe,ar.js,jsartoolkit,Javascript,Augmented Reality,Aframe,Ar.js,Jsartoolkit,我想显示一个预加载屏幕，直到所有资源加载和渲染 我尝试使用事件加载的资产，但它不起作用。当我们增加3d模型、图像和视频时，这些资产几乎为50-60mb。因此，加载资产和扩充需要时间。如果网络速度较慢（在“检查网络”选项卡中选择“我们测试的3G慢速”），则当我们增强4-8秒时，会出现并播放黑屏视频。 请编辑 你好 注册表组件（“vidhandler”{ init：函数（）{ //设置初始状态和变量。 this.toggle=false； this.vid=document.querySelect
你好
注册表组件（“vidhandler”{
init：函数（）{
//设置初始状态和变量。
this.toggle=false；
this.vid=document.querySelector（“#vid”）；
这个.vid.pause（）；
console.log（“***************视频暂停”）；
},
勾选：函数（）{
if（this.el.object3D.visible==true）{
如果（！this.toggle）{
this.toggle=true；
这个.vid.play（）；
console.log（“***************视频播放”）；
}
}否则{
this.toggle=false；
这个.vid.pause（）；
//console.log（“***************视频暂停”）；
}
}
});
提前感谢有两种不同的选择
在
声明中启用
1.Aframe 9（版本）的Aframe加载屏幕Id，但我使用的是Aframe 8。。。。。所以在8中没有内置的加载屏幕。。。。。。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component@5.1.2/dist/aframe-animation-component.min.js"></script>
<script>
AFRAME.registerComponent("vidhandler", {
init: function () {
// Set up initial state and variables.
this.toggle = false;
this.vid = document.querySelector("#vid");
this.vid.pause();
console.log('************* Vid Paused');
},
tick: function () {
if (this.el.object3D.visible == true) {
if (!this.toggle) {
this.toggle = true;
this.vid.play();
console.log('************* Vid Play');
}
} else {
this.toggle = false;
this.vid.pause();
//console.log('************* Vid Paused');
}
}
});
</script>
</head>
<body>
<a-scene vr-mode-ui="enabled: false" artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 90;' arjs='debugUIEnabled: false;detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
<!-- ALL ASSETS -->
<a-assets>
<!-- 3D MODEL -->
<a-entity id="model" src="https://cdn.glitch.com/c3106e6c-98cb-40e4-b0c1-85257680d25a%2Fygark.glb?v=1564472468760" crossorigin="anonymous" rotation="-90 0 -90">
</a-entity>
<!-- VIDEO -->
<video preload="auto" id="vid" response-type="arraybuffer" loop="false" crossorigin webkit-playsinline playsinline controls>
<source src="https://cdn.glitch.com/c3106e6c-98cb-40e4-b0c1-85257680d25a%2Fvid.mp4?v=1564472320471" type="video/mp4">
</video>
<!-- IMAGE -->
<img id="img" src="https://cdn.glitch.com/c3106e6c-98cb-40e4-b0c1-85257680d25a%2Fsun.png?v=1564472507237">
</a-assets>
<!-- ALL ASSETS -->
<a-marker type="pattern" preset="hiro" vidhandler>
<a-entity position="0 0 0">
<a-video width="2" height="2" rotation="-90 0 0" material='transparent:true;shader:flat;side:double;src:#vid'></a-video>
</a-entity>
<a-image width="2" height="2" material='transparent:true;shader:flat;side:double;src:#img' position="2 0 0" rotation="-90 0 0"></a-image>
<a-entity position="-1.5 0 0" gltf-model="#model" material='transparent:true;shader:flat;side:double;metelness:2' rotation="0 0 0" scale="0.5 0.5 0.5" shadow="receive: false" >
</a-entity>
</a-marker>
<a-entity camera>
<a-entity cursor="rayOrigin: mouse;fuse: false;"></a-entity>
</a-entity>
</a-scene>
</body>
</html>
<a-scene loading-screen="dotsColor: red; backgroundColor: black"></a-scene>
document.addEventListener('DOMContentLoaded', function() {
var scene = document.querySelector('a-scene');
scene.addEventListener('loaded', function (e) {
// hide splash screen
});
});