I wrote a demo scene on glitch to test my exported gltf model in a-frame, but I am getting an error in the console:
My code
<!DOCTYPE html>
<html>
<head>
<title>Basic Scene - A-Frame</title>
<meta name="description" content="Basic Scene - A-Frame">
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="gltfDemo" src="https://cdn.glitch.com/a3c2afff-dcc6-4918-bb73-5716b35f39b0%2Fexport.gltf?1499844855169"></a-asset-item>
<a-asset-item id="buffer_0.bin" src="https://cdn.glitch.com/a3c2afff-dcc6-4918-bb73-5716b35f39b0%2Fbuffer_0.bin?1499844851189"></a-asset-item>
<a-asset-item id="buffer_1.bin" src="https://cdn.glitch.com/a3c2afff-dcc6-4918-bb73-5716b35f39b0%2Fbuffer_1.bin?1499844853034"></a-asset-item>
</a-assets>
<a-entity gltf-model="#gltfDemo"></a-entity>
<a-sky color="#000"></a-sky>
<a-light type="ambient" color="#445451"></a-light>
<a-plane color="#050" rotation="-90 0 0" height="100" width="100"></a-plane>
<a-camera>
<a-cursor color="#FAFAFA"></a-cursor>
</a-camera>
</a-scene>
</body>
</html>
The error:
VM1762:1 Uncaught SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at e.parse (GLTFLoader.js:68)
at GLTFLoader.js:32
at three.js:29160
Source files:
Glitch Fiddle with source files
I have a feeling that I am importing the gltf wrongly into glitch or using it the wrong way. Can anybody help me?
from what I understand Your .gltf holds references to the .bins and .jpg textures. Glitch is not that straightforward, and these files are not in one "directory", as You can see, when You get the links.
The error You get is caused by aframe trying to parse a null/nonexistent source file ( bins and jpgs).
I think it may be better if You put these files on Your server, or put it on github if You want (for the directories are straightforward).
You can also change the file paths in the .gltf file like suggested here.
Related
I'm trying to load a GLTF model into an A-Frame script.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="guiana" src="/assets/guiana.glb"></a-asset-item>
</a-assets>
<a-entity gltf-model="#guiana"></a-entity>
</a-scene>
</body>
</html>
In my project folder I have an assets subfolder with the guiana.glb file.
Upon dropping the index.html into Chrome I get stuck in a blue loading screen:
Any debugging tips would be appreciated! Thanks!
Turns out it is a cross-site scripting issue (which you can tell by looking at the developer tools console). One way to fix it is by uploading your .GLB file somewhere else and including the full URL in the index.html.
I have created an ar.js tryout page like this:
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam;'>
<!-- handle marker with hiro preset -->
<a-marker preset='hiro'>
<a-entity
gltf-model-next="src:url(lugia_pokemon/scene.gltf)"
position="0 0 0"
scale="1 1 1"></a-entity>
<!-- <a-image src="corvette_stingray/image.jpg"></a-text> -->
<!-- <a-text value="Hello" color="red"></a-text> -->
</a-marker>
<!-- <a-marker preset='hiro'></a-marker>
<a-text value="Hello, this is Enze'a first AR try!" color="red"></a-text>
</a-marker> -->
<!-- add a simple camera -->
<a-entity camera></a-entity>
It is not working after I launch the html file. The gltf is in the folder with .bin under the same dir of the html. Running on localhost with npm http-server also not working as implied by the console. But if I change the entity to something like text or a-box it does show. Also for a-image it only show a white box without any image.
Also when I open with my phone it cannot get the permission of webcam but when open https://codepen.io/jeromeetienne/pen/mRqqzb my phone chrome app will ask for the permission of camera and open and work.
Thank you guys!
Try starting your scene with <a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false; trackingMethod: best;' antialias='true' gesture-detector> it will help you get everything more aligned. Also, try to separate the asset declaration from its use:
<a-assets>
<a-asset-item id="gltf=model" src="YOUR_SRC"></a-asset-item>
</a-assets>
<a-marker preset='hiro'>
<a-gltf-model src="#gltf-model" scale="1 1 1" position="0 0 0">
</a-gltf-model>
</a-marker>
You can also try using echoAR (full disclosure, I'm involved in this project). There is a whole section that build's AR.js for you. You can use it entirely or just see how to build your HTML file from the results you are getting there.
I'm currently testing AR.js to display 3D models in augmented reality using phones. My web coding skills are very novice so I'm pulling together different tutorials to get what I want. I believe I've just about nailed what I need to properly display a gltf file but there seems to be some small issue as the model won't display (I've confirmed that it's a valid file using a gltf viewer). The code also works fine to display a simple a-box, but falls down as soon as I comment that out and add the line for the gltf model.
Any help would be most appreciated!
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.2.1/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: true;'>
<a-marker preset="hiro">
<!--<a-box position='0 0.5 0' material='color: yellow;'></a-box>-->
<a-entity gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
You can browse the new AR.js docs there is an example with a gltf model with also an online live version.
In the example you provided you should make this change
from this:
<a-entity
gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>
to:
<a-entity gltf-model="https://arjs-cors-proxy.herokuapp.com/https://tests.offtopicproductions.com/ywca.gltf"></a-entity>
You should add:
https://arjs-cors-proxy.herokuapp.com/
to avoid CORS issues if the resource is not in the same host.
AR.js is under a new github org https://github.com/AR-js-org all the resources (libs and docs) are here now.
The animation for the model is not playing. Here are the steps I followed:
I first downloaded a 'Walking.dae' collada file from mixamo
I then converted the collada format to .gltf 2.0 using the KhronosGroup/glTF online converter.
Then I used the animation-mixer by don mccurdy in the code.
Problems:
The first problem I immediately observe from the browser console is the following: 'components:gltf-model:warn Failed to load glTF model'. So is there a conversion problem from the KhronosGroup/glTF online converter?
I tried my best but could not find the url that we use in the <script scr="path">. Can this "path" to the animation-mixer.js file by don mccurdy be provided to me?
Lastly is this the code using which my model can show the animation or is there anymore to this?
Code:
<html>
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<!--script url for animation mixer from don mccurdy-->
</head>
<body>
<a-scene>
<a-sky color="#6EBAA7"></a-sky>
<a-entity gltf-model="Walking.gltf" animation-mixer="clip: Idle"></a-entity>
<a-entity position="0 1 2"><a-camera></a-camera></a-entity>
</a-scene>
</body>
</html>
The model and the animation have been downloaded from Mixamo. I have also placed the downloaded .dae files in the same folder as that of the html I am running. Here is the structure:
The directory structure
Any help will be appreciated. Thanks in advance.
I've used 2D images fine to appear and without any errors in the console, but when attempting to use a gltf model, nothing shows up and I get the following error 'Cannot read property 'slice' of undefined at aframe.min.js:121'.
This is where I got the model - https://sketchfab.com/models/294e79652f494130ad2ab00a13fdbafd
And this is the documentation I was trying to follow - https://aframe.io/blog/arjs/
<html>
<head>
<meta aframe-injected="" name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no,user-scalable=no,minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded arjs>
<a-assets>
<a-asset-item id="drone" src="busterDrone/busterDrone.gltf"></a-asset-item>
</a-assets>
<a-marker preset="hiro">
<!--why doesn't this work?-->
<a-entity gltf-model="#drone"></a-entity>
</a-marker>
</a-scene>
</body>
</html>
this seems related to a-frame more than AR.js