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
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 trying to use the Georgia font in A-frame. I found and downloaded it and then uploaded it into assets. It's a .ttf file type, so I'm not sure if that's why it isn't working, but when I try and use it in my code, it doesn't work.
this is the code I tried within asset tags:
a-asset-item id="georgia.ttf" src="https://cdn.glitch.com/b4adbd04-68ad-4b83-8ff1-0cfe5e5c37ec%2Fgeorgia.ttf?v=1619266271805">
a-mixin id="texts" text="color: #303030; width: 1.8; lineHeight: 60; align: center; baseline: top; wrapCount: 12; font: georgia.ttf">
using fonts in 3D is not that simple. Every single character must be rerendered using geometry or textures. I strongly recommend you read this entire text A-Frame documentation page or at least the marked paragraph. You can't use standard font file types.
In A-Frame they decided to go with the following formats:
MSDF
SDF
Those are "images" of every single letter in a specific font with a .json file describing that image.
Example of MSDF image file (Montserrat-Italic):
Working Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<style>
</style>
</head>
<body>
<a-scene>
<a-text value="hello in your font"
position="0 1.6 -1"
color="red"
negate="false"
font="https://cdn.glitch.com/b4adbd04-68ad-4b83-8ff1-0cfe5e5c37ec%2Fgeorgia-msdf.json"
font-image="https://cdn.glitch.com/b4adbd04-68ad-4b83-8ff1-0cfe5e5c37ec%2Fgeorgia.png?v=1619693337804">
</a-text>
<a-text value="hello in regular"
position="0 2 -1"
color="red">
</a-text>
</a-scene>
</body>
</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 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.