gpt4 book ai didi

javascript - 在AR.js中加载模型时,显示加载屏幕

转载 作者:行者123 更新时间:2023-12-02 23:18:32 25 4
gpt4 key购买 nike

当我们加载大型 3D 模型或大型视频时,加载资源(资源)和渲染资源需要时间,所以我想显示加载屏幕或加载 Gif 文件或加载 A-Box - 直到整个资源加载渲染完成,在屏幕上或者在图案上,请查看我的GLITCH ,它可以工作,但加载和渲染需要 10-15 秒。

我尝试添加资源加载管理器,但没有成功。各种方法都试过了,还是不行

<!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>
</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;'>
<a-assets>
<a-entity src="https://cdn.glitch.com/a5ca03d3-3024-44dc-9256-0b75c4247613%2Fscene.gltf?v=1563255364433" id="model"></a-entity>
</a-assets>
<a-marker preset="hiro">
<a-entity gltf-model="#model" material='transparent:true;shader:flat;side:double;metelness:2' scale="0.04 0.04 0.04" ></a-entity>
</a-marker>
<a-entity camera></a-entity>
<a-entity shadow="cast: true"></a-entity>
</a-scene>
<script>
// Workaround for an AR.js bug (https://github.com/jeromeetienne/AR.js/issues/410)
const sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener('loaded', () => {
sceneEl.camera = new THREE.PerspectiveCamera();
scene.add( camera );
});
</script>
</body>
</html>

显示 HIRO 后图案加载和渲染需要 10-15 秒(取决于互联网速度)。我想显示一些预加载器或加载屏幕或一些 Gif Loading Image显示直到对象( Assets )完全加载并渲染并在渲染和加载完成后消失......

提前致谢

最佳答案

对于型号,您可以使用model-loaded事件:

<a-marker preset="hiro">
<a-entity id='loadingEl'></a-entity>
<a-entity gltf-model="#model"></a-entity>
</a-marker>

<小时/> #loadingEl可以有一个带有“正在加载”图像的原始框,加载模型时,您可以删除(实体或其可见性):

AFRAME.registerComponent('foo', {
init: function() {
this.el.addEventListener('model-loaded', e => {
document.querySelector("#loadingEl").remove()
})
}
})

故障here

<小时/> <a-assets>系统有一个 loaded发出事件,您也可以将其用于视频。

关于javascript - 在AR.js中加载模型时,显示加载屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57051773/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com