I'm creating several a-frame (version 0.60) objects in javascript dynamically, I manage to set all sorts of attributes successfully.
When it comes to a look-at attribute to set to the camera, it is ignored.
This is the markup I use:
<a-camera id="camera" camera look-controls>
<a-cursor id="cursor" color="#FF0000"></a-cursor>
</a-camera>
And the js code:
var aboxEl = document.createElement('a-box');
aboxEl.setAttribute('look-at', 'camera');
Thank you for any hint
thank to Andrew who told me to add the look-at component source.
<script src="https://rawgit.com/ngokevin/aframe-look-at-component/master/dist/aframe-look-at-component.min.js"></script>
the funny thing is that you don't have to add the look-at source when doing markup
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 have two overlapping a-sky elements. Second one is positioned at z=-1000 (not visible to camera). In this setup if I set opacity of first a-sky element to 0.5, I should see second a-sky element.
Following code does not work. (Need to make this work.)
skyEl.getObject3D("mesh").material= new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load("image url"),
transparent: true,
opacity: 0.5
});
But this method works.
skyEl.setAttribute('src','image url');
skyEl.getObject3D("mesh").material.transparent = true;
skyEl.getObject3D("mesh").material.opacity= 0.5;
In my project I can't set src attribute because textures are already loaded and I can only create material from preloaded texture. I need to know what's wrong with first method and how to fix it. Is there some other parameter I need to set
Also tried using a-sphere instead of a-sky but same result.
DEMO: https://codesandbox.io/s/qx6zj247l6 (Covers both cases and please ignore all react & tween stuff.)
PS: Creating a crossfade + zoom scene transition effect.
Getting the correct render order for transparency to work as intended is difficult. From the material component documentation page:
Transparency Issues
Transparency and alpha channels are tricky in 3D graphics. If you are having issues where transparent materials in the foreground do not composite correctly over materials in the background, the issues are probably due to underlying design of the OpenGL compositor (which WebGL is an API for).
In an ideal scenario, transparency in A-Frame would “just work”, regardless of where the developer places an entity in 3D space, or in which order they define the elements in markup. We can often run into scenarios where foreground entities occlude background entities. This creates confusion and unwanted visual defects.
To work around this issue, try changing the order of the entities in the HTML.
To resolve your case, simply place #sky1 after #sky2 in the HTML:
render() {
return (
<Scene>
<Entity id="sky2-wrapper" rotation="0 90 0">
<Entity id="sky2" primitive="a-sky" position="0 0 -1000" />
</Entity>
<Entity id="sky1" primitive="a-sky" opacity="1" />
<Entity
camera={{
far: 10000,
fov: 80,
near: 0.05,
active: true
}}
id="cam"
rotation="0 90 0"
mouse-cursor
look-controls="reverseMouseDrag:true"
/>
</Scene>
);
}
<a-sphere color="#EF2D5E" material="color:#EF2D5E;src:#abc" geometry="primitive:sphere;" src="#abc"></a-sphere>
The texture works and references "#abc" in a-assets.
Now when I change the src attribute to:
src=""
The texture doesn't seem to change. If I remove the attribute it goes black.
A-Frame 0.5.0
Example: https://codepen.io/msj121/pen/JNrWxg
In your HTML...
<a-sphere color="#EF2D5E"
material="color:#EF2D5E;
src:#abc"
geometry="primitive:sphere;"
src="#abc"></a-sphere>
... note that you have both a src attribute, and a material.src property. These are actually the same thing: src="#foo" is a shorthand for material="src: #foo;". I'm not sure what happens when you try to set both, but it might cause issues. So, I'd pick one of those and stick with it.
Depending on which you pick, you can unset the texture in one of these two ways:
el.setAttribute('material', {src: ''});
el.setAttribute('src', '');
If neither of those work, you probably have found a bug; please report it on GitHub. :)