Can't get any example with a model to load - is there a known working one?

internetscooter commented 6 years ago

Hi,

I am trying to get a simple model to load and display. I know about scaling etc, so I want to start with something that works and use the working one as reference. In the code there is a firefox example but all I get is a white screen.

I have loaded it here https://s3-ap-southeast-2.amazonaws.com/santastechnicalservices/examples/demo-firefox-release/cute-fox-model.html

Is there a "model in 10 lines example" somewhere that can be included in the codebase? I believe the following should work?

<!-- AR.js by @jerome_etienne - github: https://github.com/jeromeetienne/ar.js - info: https://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf -->
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='trackingMethod: best;'>
      <a-anchor hit-testing-enabled='true'>
        <a-entity gltf-model=”url(https://s3-ap-southeast-2.amazonaws.com/santastechnicalservices/ghostie.gltf) scale="0.25 0.25 0.25”>  </a-entity>
      </a-anchor>
        <a-camera-static/>
    </a-scene>
</body>

Cheers,

Paul

madsenfr commented 6 years ago

You can take a look at https://medium.com/@akashkuttappa/using-3d-models-with-ar-js-and-a-frame-84d462efe498 and https://aframe.io/docs/0.7.0/components/gltf-model.html

You should use so you can import glTF v2 without extra loader.

Last but not least you missed a quote after your url.

kvanderd commented 6 years ago

Here is a simple example of a rotating cube with a texture. Make sure to include the bin file in the same directory as the .gltf.

<!DOCTYPE html>
<html>
<head>
    <title>Cube</title>
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>

</head>
<body style="background-color: #000;">
<a-scene>
  <a-assets>
    <a-asset-item id="cube" src="assets/bsquare.gltf"></a-asset-item>
   </a-assets>
    <a-entity 
         gltf-model="#cube"
         position="0 1.43 -3" 
         scale="0.65 0.65 0.65">
      <a-animation 
           dur="4000" 
           attribute="rotation" 
           to="0 360 0" 
           repeat="indefinite">
        </a-animation>
    </a-entity>
</a-scene>
</body>
</html>

gltf-bin.zip

internetscooter commented 6 years ago

Thanks for the quick replies! My colleague and I took them and tweaked the code to this:

<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='trackingMethod: best;'>
      <a-anchor hit-testing-enabled='true'>
      <a-gltf-model src="https://andrescuervo.github.io/assets/ghostie/ghostie.gltf" scale="0.10 0.10 0.10"></a-gltf-model>
           <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
      </a-anchor>
        <a-camera-static/>
    </a-scene>
</body>

Till I take it down you can view it here:

Ghostie

The model is not ours and comes from here

Thanks Again!

jeromeetienne / AR.js

Can't get any example with a model to load - is there a known working one? #269