-1

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.

Niharika Sunil
  • 1

1 Answers1

0

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>
Minty Crisp
  • 16
  • 2