3D model (.gltf format) from a local file is not being read through aframe
Question
Please help why the local version of aframe code is not working.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def main():
return render_template('tree1.html')
return render_template('tree2.html') 'Version 2
if __name__ == '__main__':
app.run(port = 8080)
Version 1: tree1.html
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<!-- we import arjs version without NFT but with marker + location based support -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-entity
position="0 0 0"
scale="0.05 0.05 0.05"
gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Output: Open I show the marker "hiro" in front of the webcame and trex pops up fine.
Version2: tree2.html
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<!-- we import arjs version without NFT but with marker + location based support -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-entity
position="0 0 0"
scale="0.05 0.05 0.05"
gltf-model="file:///C:/Users/user123/Desktop/scene.gltf"
<!--gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"-->
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Output: Nothing happens here
Appreciate if you can advise how to present the local version of scene.gltf into the AR program in the version 2.
1 answers
solution1
0 2022-07-24 03:29:46
Even though you are developing locally, the assets still need to be delivered securely and pass the CORS policy to load in a-frame.
Your scene is most likely throwing some errors related to not being able to load that file securely, timing out in the process. Ideally you would want to load that gltf file via the asset management system and then reference it in an entity below. Helps avoid scene timeouts and crashing as well.
I don't know the Flask environment, but you will want a way to declare a specific asset or a local folder of assets for the app to host(again locally) to be pulled from in your a-scene. Otherwise you may want to look into other local hosting environments like the popular and free XAMPP.
A-Frame Asset Management System : https://aframe.io/docs/1.3.0/core/asset-management-system.html#sidebar
CORS docs : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
CORS Simplified breakdown exmaple : https://riptutorial.com/aframe/example/30904/cross-origin-resource-sharing--cors-
Free Local hosting development application (XAMPP) : https://www.apachefriends.org/index.html
Asset Management Test Example :
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<!-- we import arjs version without NFT but with marker + location based support -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<!-- Asset management system. -->
<a-assets timeout="10000">
<a-asset-item id="sceneAsset" src="file:///C:/Users/user123/Desktop/scene.gltf"
preload="auto"
crossorigin="anonymous"></a-asset-item>
</a-assets>
<a-marker preset="hiro">
<a-entity
position="0 0 0"
scale="0.05 0.05 0.05"
gltf-model="#sceneAsset"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.