How can I add a dynamic background visual for <a-sky> object?
Especially I want to add a 3d map view to object.
I try assets manager with image object:
<!-- <a-assets>
<img id="sky"/>
</a-assets>
<a-sky src="#sky"></a-sky> -->
However it shows a black screen. It probably because <img /> element only accepts 2d images/resources.
Many thanks...
Don't need to use <a-assets> and <img> if it's dynamic. Just set the src.
document.querySelector('a-sky').setAttribute('src', 'img.png');
Related
A question about a-frame? Does aframe offer button objects (like a-button)? If yes, why are there no information about them in the documentation?
Are they planned to be added?
And if it isnt, is there a way to create objects in a-frame that behave like button that can be used on a touchscreen?
You can turn pretty much any a-frame object into a button.
make your cursors rayOrigin to your mouse. (You can add the cursor attribute to your camera)
<a-camera cursor="rayOrigin: mouse"></a-camera>
For example lets take an a-box primitive and turn it into a button by adding the standard onclick event to the element
<a-box onclick="doSomething"></a-box>
And initiate the function you want.
This should work for touch too.
If you want an overlay UI, I'd always go with HTML elements. They're easier to manage, as you can position them on the screen easily.
If you want the UI to track an object (like a marker in arjs), you can use my tracked-ui component as follows:
<!-- The HTML UI -->
<div id="ui"></div>
<a-scene arjs>
<a-marker tracked-ui="element: #ui; offset: 0 200">
<a-box></a-box>
</a-marker>
</a-scene>
I'm trying to make a simple arjs application based on the tutorials on the website, specifically this one
I've been able to successfully swap out other gltf models for new codes, but whenever I try to use my own models they do not display in the application.
I've tested my model in the viewer at https://gltf-viewer.donmccurdy.com/ and it shows up fine.
My code is below.
<body style='margin : 0px; overflow: hidden;'>
<!-- we add detectionMode and matrixCodeType to tell AR.js to recognize barcode markers -->
<a-scene embedded vr-mode-ui="enabled: false" arjs="sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
<a-assets>
<a-asset-item id="animated-asset" src="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf"></a-asset-item>
<a-asset-item id="bimmer" src="https://raw.githubusercontent.com/jaggre/consortium/master/compresso.gltf"></a-asset-item>
</a-assets>
<a-marker type='barcode' value='2'>
<a-entity
animation-mixer
gltf-model="#bimmer"
scale="4 4 4">
</a-marker>
<a-marker id="animated-marker" type='barcode' value='6'>
<a-entity
animation-mixer
gltf-model="#animated-asset"
scale="2 2 2">
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
Check in your console for any Cross origin Resource Sharing errors - sometimes if your website is hosted via http or set up differently it doesn't work. see https://aframe.io/docs/1.0.0/core/asset-management-system.html#cross-origin-resource-sharing-cors and https://aframe.io/docs/1.0.0/introduction/installation.html#use-a-local-server . If you just use the file:// protocol as you are testing it may not work.
Other things you could try is moving the model's a-entity tag outside of the marker tag to see if the marker class is having an effect on it. perhaps check the A-frame inspector (Ctrl Alt I) and poke around if it's just displaying in the wrong place.
Update: gltf2.0 not showing in ar.js project seems like a similar question. Perhaps try it's answers too.
I just started with ar.js for my presentation and got in problem with one of my model loading, I can see only cube on my screen.
While with other model it is actually there( second code ).
Tried with different scale factors and all is the same, different model and its ok.
Model that Im tring to get is loading normal on computer program that opens .obj could size of model be problem, .obj is around 35Mb.
<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>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<a-assets>
<a-asset-item id="tree-obj" src="https://raw.githubusercontent.com/Kanu-1988/ar.js/master/namtalica2.obj"></a-asset-item>
<a-asset-item id="tree-mtl" src="https://raw.githubusercontent.com/Kanu-1988/ar.js/master/namtalica2.mtl"></a-asset-item>
</a-assets>
<a-entity obj-model="obj: #tree-obj; mtl: #tree-mtl"
<a-entity scale="0.01 0.01 0.01"></a-entity>
></a-entity>
<a-marker-camera preset='hiro'></a-marker-camera>
<a-marker type='pattern' url='http://examples.org/hiro.patt'></a-marker>
</a-scene>
</body>
Code that works is with
<a-assets>
<a-asset-item id="tree-obj" src="https://raw.githubusercontent.com/Kanu-1988/kanu/master/rezac2.obj"></a-asset-item>
<a-asset-item id="tree-mtl" src="https://raw.githubusercontent.com/Kanu-1988/kanu/master/rezac2.mtl"></a-asset-item>
</a-assets>
models load much more reliably as .gltf format.
download the obj model and convert it to gltf format.
There are many converters online. Here is one:
https://www.khronos.org/news/permalink/new-drag-and-drop-to-convert-obj-models-to-gltf
place the gltf file on your server and use that url in your a-assets file.
Your original obj file looks like it might be inside of a js file.
Kanu-1988/ar.js/master/namtalica2.obj
ar.js could be a bad file path that is being parsed as a js file.
Thanks guys for the reply, managed to "get" model, it was off center so it was outside camera range, scale it a bit more in blender and now is in range, have to centered it a bit more and planning to add rotate and zoom function.
this is how it looks now
Here is current code:
<a-assets>
<a-asset-item id="tree-obj" src="https://raw.githubusercontent.com/Kanu-1988/T2/master/u5.obj"></a-asset-item>
<a-asset-item id="tree-mtl" src="https://raw.githubusercontent.com/Kanu-1988/T2/master/u5.mtl"></a-asset-item>
I've tried <a-videosphere> and <a-video> and they are great.
But if i use a "normal" video, it is incredibly stretched with a-videosphere and just flat with a-video.
But is there a way for the video to be curved around the user ?
Just like if the user was inside a cylinder : similar to a-curvedimage but for a video.
EDIT (problem with a-curvedimage and src) :
You can display a video as a texture on any geometry by using the src attribute:
<a-box src="#video"></a-box>
<a-curvedimage src="#video"></a-curvedimage>
<a-torus-knot src="#video"></a-torus-knot>
remixed example glitch here.
If you're asking if you can make a normal video equirectangular, without earlier preparation, or some image manipulation library, aframe won't do it for you.
I encountered the same issue with a-curvedimage and the src attribute, and solved it by using the generic a-entity element instead, recreating the open-ended, double-sided cylinder of the a-curvedimage element.
Example for a 1280x720 video:
<a-scene>
<a-assets>
<video id="myvideo" preload="auto" src="/path/to/video.mp4" width="1280" height="720" autoplay="true" loop="true" crossorigin="anonymous" playsinline="" webkit-playsinline=""></video>
</a-assets>
<a-entity material="shader: flat; side: double; src: #myvideo" geometry="primitive: cylinder; radius: 5; height: 3.6815; open-ended: true; theta-start: 142.5; theta-length: 75; position="0 1.5 0" rotation="0 0 0" scale="-1 1 1"></a-entity>
</a-scene>
Additional Info:
Stefie has a great calculator for the attributes of different dimensions for curved images and videos.
Edit: Video was inverted on the X-Axis to the user, so added a scale attribute with -1 for the X-Axis.
I have the following code snippet
<a-assets>
<img id="garage_pic" src="images/labs/SFOGarage_photosphere.jpg">
</a-assets>
<a-sky id="sfogarage" src="#garage_pic" rotation="0 -130 0" visible="true"
radius="100"></a-sky>
Here in the above code, i am trying to access image inside tag through
src="#garage_pic". But i am not able to access it. my page background is still blank.
Please suggest a solution for the above. Thanks