Camera motion animation does not work in VR mode on Android in Google chrome. Code example:
<a-scene background="color: #FAFAFA">
<a-assets>
<img id="room1" src="img/pano_1.jpg">
</a-assets>
<a-entity id="cam" camera position="0 1.6 0" look-controls animation__zoomin="property:position;dur:5000;delay:5000;to:0 1.6 -300" animation__zoomout="property:position;dur:10;delay:10000;to:0 1.6 0"></a-entity>
<a-sky id="skybox" src="#room1"></a-sky>
</a-scene>
Animate a camera rig instead of
the camera.
Related
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 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.
When loading an objects from the assets manager in Aframe, the model appears too large, so I want to rescale it.
On the Aframe website, it is stated that
If you don’t see your model, try scaling it down. OBJ models generally have extremely large scales in comparison to A-Frame’s scale.
But how can I do this? I tried to use the same depth/height/width parameters as in a element but no success.
Here is my code:
<html>
<head>
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="test-obj" src="test.obj"></a-asset-item>
<a-asset-item id="test-mtl" src="test.mtl"></a-asset-item>
</a-assets>
<a-obj-model src="#test-obj" mtl="#test-mtl" depth="2" height="0.5" width="0.5">
</a-obj-model>
</a-scene>
</body>
</html>
The scale component is what you want, for external models:
<a-obj-model src="#test-obj" mtl="#test-mtl" scale="0.1 0.1 0.1">
</a-obj-model>
https://aframe.io/docs/0.3.0/components/scale.html