I'm trying to load a GLTF model using A-Frame version "1.5.0" and display it in my smartphone's browser via webcam. I've encountered three issues with the provided code: Firstly, the GLTF loads automatically when the page opens, causing the page to be blocked and preventing scrolling. Additionally, when I click the VR button, the GLTF displays with a black background. I've searched for demos to address these problems, but haven't found a solution yet. Could you please review my code?
<head>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/v6.1.1/dist/aframe-extras.loaders.min.js"></script>
</head>
<body>
<a-scene vr-mode-ui="enabled: false">
<a-assets>
<a-asset-item id="yourModel" src="path/gltf/model.gltf"></a-asset-item>
</a-assets>
<a-camera id="camera" position="0 1.6 0"></a-camera>
<a-entity id="rig" movement-controls kinematic-body>
<a-entity id="cameraRig" camera look-controls>
<a-entity
geometry="primitive: sphere; radius: 0.05"
material="color: red"
position="0 0 -1"
cursor-listener
></a-entity>
</a-entity>
</a-entity>
<a-entity id="gltfModel" gltf-model="#yourModel" position="0 1.6 -2"></a-entity>
<a-entity laser-controls="hand: right"></a-entity>
<a-entity laser-controls="hand: left"></a-entity>
<a-sky color="black"></a-sky>
</a-scene>
</body>
Hello, I'm trying to load a GLTF model using A-Frame version "1.5.0" and display it in my smartphone's browser via webcam
a few things that come to mind here, and I should mention that I have been using A-frame js for just a few days, so sorry if I am way off base here
1.) the position of the <a-entity id="gltfModel" is has it's z-axis set to -2 which means it's supposed to appear behind you so try turning around?
2.) I have had luck putting the <a-entity between the tags and then adjusting the position of the <a-entity element.
3.) I am attempting to use arjs https://ar-js-org.github.io/AR.js-Docs/ which amongst many other things will allow you set a source of webcam on the <a-scene element (BUT the webcam does not seem to work for me using A-frame 1.5, I have to use 1.4)
So maybe
<a-camera ...><a-entity ...></a-entity></a-camera>(replace ... with your parameters) and that might help. But also look at the arjs as that has some nice examples there too.oh one last thing if you are going down the AR route you might want to have a look at https://github.com/matrix-org/aframe-look-at-component which can auto-update the position attribute so a-frame elements can be facing one another, even the element.