aframe - 如何在 aframe 中添加自定义加载屏幕以显示加载了多少百分比的 aframe 场景(对于大型 gltf 模型)?
问题描述
我在 aframe 0.8.2 中尝试这个,但任何版本都可以。
我尝试在这里使用解决方案In AR.js When Load Model ,Show A Loading Screen
我想从pace.js添加类似Center Circle/Center Atom的东西,即 https://github.hubspot.com/pace/docs/welcome/
<!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('loader', {
init: function() {
let loader = document.querySelector("#loadingEl")
this.el.addEventListener('model-loaded', e => {
console.log('loaded')
loader.setAttribute("visible", "false")
})
}
})
</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-box id="loadingEl"></a-box>
<a-entity gltf-model="#model" material='transparent:true;shader:flat;side:double;metelness:2' scale="0.04 0.04 0.04" loader></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>
解决方案
如果您有多个模型,则可以使用model-loaded
事件对其进行计数。
如果你有一个大模型并且你想看看它加载了多少......那么它的故事就更长了。据我所知,省略了 gtlf 加载进度(此处为源代码),因此您需要使用gltf-model
组件的自定义版本 - 替换
}, undefined /* onProgress */, function gltfFailed (error) {
与,例如
}, function gltfProgress(xhr) {
emit("model-progress", {progress: ( xhr.loaded / xhr.total * 100 ) })
}, function gltfFailed (error) {
并检查更新
this.el.addEventListener("model-progress", e => {
console.log(e.progress)
})
推荐阅读
- xtext - Xtext 导入命名空间验证
- c# - c#图像编码性能
- php - Angular5在HTTP GET请求中出现错误
- java - HttpURLConnection responseCode 405 方法不允许错误
- python - 有没有办法在一行中使用一个模拟随机变量的副本?
- session - 有没有一种方法可以加密快速会话 cookie?
- jakarta-ee - Payara 从/向 ActiveMQ Artemis 消费/生产消息
- hadoop - 如何获取hbase中rowpefix过滤器的最后一个键/值?
- python-3.x - Gdal GeoDjango Windows
- python - Django如何按日月顺序对日期字段进行排序以显示生日列表