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.
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'm importing a .gltf model of a gallery and add ambient and directional lights (tried all types). Everything works as expected in 0.8.0; however, when using version 0.9.0 the interior of the model appears dark and no lights can affect it. I have to use A-frame 0.9.0 because of the added support for Oculus Go controller.
I've been trying to figure this out all morning and still can't seem to find what the issue could be.
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<!-- Changing the version to 0.8.0 eliminates the problem -->
<script src="https://unpkg.com/aframe-environment-component#1.1.0/dist/aframe-environment-component.min.js"></script>
<!--script src="https://dist.3d.io/3dio-js/1.2.x/3dio.min.js"></script-->
</head>
<body>
<a-scene light="defaultLightsEnabled: false">
<a-assets>
<a-asset-item id="room" src="https://cdn.glitch.com/a8fe8e49-6e34-4c86-baec-05b8aff4571e%2Fscene.gltf?1555958013685"></a-asset-item>
<a-asset-item id="gallery" src="https://cdn.glitch.com/a8fe8e49-6e34-4c86-baec-05b8aff4571e%2FGallery.fbx?1555957411386"></a-asset-item>
<a-img id="sky" src="https://cdn.glitch.com/a8fe8e49-6e34-4c86-baec-05b8aff4571e%2F47096473752_0baa631c08_o.jpg?1555959294746"></a-img>
</a-assets>
<a-entity position="0 -0.1 0" rotation="90 0 0" scale="50 50 1" geometry="primitive:plane"></a-entity>
<a-entity gltf-model="#room" scale="0.01 0.01 0.01" position="0 0.01" shadow="cast:true; receive:true;">
</a-entity>
<a-entity position="0.59272 4.10082 -0.40143" light="intensity:5;type:hemisphere"></a-entity>
<a-entity position="0 1.15538 -3.77451" light="intensity:3"></a-entity>
<a-sky src="#sky"></a-sky>
</a-scene>
</body>
</html>
This model uses the KHR_materials_unlit glTF extension, which causes it to be unaffected by lighting. Unlit – or shadeless – materials are used for better performance on mobile, and some stylized effects.
Opening the same model in other viewers you'll see the same result:
https://gltf-viewer.donmccurdy.com/#model=https://cdn.glitch.com/a8fe8e49-6e34-4c86-baec-05b8aff4571e/scene.gltf?1555958013685
^Click the info button in the lower left to see a list of extensions used by the model.
I think maybe A-Frame 0.8.0 didn't yet support this extension?
I made a aframe ar. in I put a texture png.
when I use a png from some url it work some png not,
and when I try with the same png downloaded on my computer it does no work.
Exemple that don't work:
<script src="https://aframe.io/releases/0.6.0/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>
<a-assets>
<img id="my-texture" src="rubiscube.png">
</a-assets>
<a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
but like this it works:
<a-entity geometry="primitive: box" material="src: url(https://static.wixstatic.com/media/2cd43b_b13c89d3859a48129a434265b3ddd1a1~mv2_d_1826_1920_s_2.png)"></a-entity>
but that url of image not
https://i2.wp.com/rgvbingo.com/wp-content/uploads/2014/04/bingo-balls-hi-res.png)">
why? what is the difference betwin this 2 images or url
and why if it work inline url why not offline?
You have to serve the image through a local server like for instance http-server. Browsers don't have access to the local file system. More details on A-Frame FAQ
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.
I would like to use a component like shadow from aframe-extras https://github.com/donmccurdy/aframe-extras/tree/master/src/shadows
How do I use or install external components into my A-Frame scene?
<html>
<head>
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box color="red" position="0 0 -4"></a-box>
</a-scene>
</body>
</html>
Generally, published A-Frame components on GitHub follow the same template. In this case, the JS file for the shadow component is at https://github.com/donmccurdy/aframe-extras/blob/master/dist/aframe-extras.shadows.js ... in the root dist/ folder.
To include the JS file externally from our scene, we can just a couple CDN services that allow CORS: rawgit.com or unpkg.com. Script tag in the <head> after aframe
<html>
<head>
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.shadows.js"></script>
<!-- or <script src="https://unpkg.com/aframe-extras/dist/aframe-extras.shadow.js"></script>
</head>
</html>
Then just use the component in your HTML
<a-scene>
<a-box color="red" position="0 0 -4" shadow="cast: true; receive: true"></a-box>
<a-light shadow-light="cast-shadow: true"></a-light>
</a-scene>
So just two steps: add script tag for component, use component.