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.
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.
So this code is directly from aframe 360 image source code. When I run this code, it is in full screen. I was wondering if there is a way to scale this image down, so that I can fit multiple images on a webpage. Thank you!
<head>
<meta charset="utf-8">
<title>360° Image</title>
<meta name="description" content="360° Image - A-Frame">
<script src="assets/js/aframe-master.js"></script>
<a-scene>
<a-sky src="assets/images/123.jpg" rotation="0 -130 0"></a-sky>
</a-scene>
You cannot have more than one sky object visible at the same time. It is not entirely clear from your question what you really want. Multiple rectangular images floating around you? Check out the ideaspace vr blog
https://www.ideaspacevr.org/theme-preview/ideaspace-compass-blog
https://www.ideaspacevr.org/
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
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.