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>
Related
When I set logarithmicDepthBuffer: true; in the AFrame renderer component, all instances of the text component no longer render at all.
To troubleshoot this, I removed all other entities from the scene, the text still did not render. I also tried using the wrapped <a-text> component, I tried alphaTest: 0.5 , setting depthTest: true and setting sortObjects: false just to see if I could get any kind of result, but found nothing that would produce any results.
<a-scene renderer="logarithmicDepthBuffer: true;">
<a-text value="The quick Brown Fox Jumps over the Lazy Dog"></a-text>
</a-scene>
The text does not appear at all. There are no rendering artifacts, or errors in the console.
You should make an issue for this on AFrame github. I saw this problem come up for someone else before..
As a workaround, I don't know the specifics of aframe, but can you use the .polygonOffset on the material for the text to avoid the zfighting you were trying to counteract with logarithmicDepthBuffer?
logarithmicDepthBuffer is a cool technique, but when enabled, all shaders that interact with depth have to be aware of it, and some of them aren't written with it in mind.
But if you're trying to fix z-fighting, polygonOffset is one of the more classical solutions.
Try using [] around renderer
<a-scene [renderer]="logarithmicDepthBuffer: true;">
<a-text value="The quick Brown Fox Jumps over the Lazy Dog"></a-text>
</a-scene>
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>
);
}
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
I am beginner of cordova learning project and creating a sample application using eclipse. Using CSS file I am able to change image, height, width, margin and padding around it.
Now, to show Labels, Buttons and Radio button, listview how to add such UI components and where to add in index.html or css and handling a click event of button?
You could add any HTML component in the body tag.
<body>
//your code for various elements goes here.
</body>
But, if you want to add these components in real time use the innerHTML property (javascript) and allocate an event listener to that component.
HTML-
<label id="alpha1" onclick="fx()">Placeholder</label>
JS-
document.getElementById('alpha1').innerHTML="Content"
function fx (){
alert('Label Clicked');
}
I am integrating gwt-maps-3.8.0-pre1.zip into aa application which using gwt-platform MVP and smartgwt.
i have a mainpresenter and nested a presenterwidget into it.
VLayout is used as parent's canvas and using HTMLPane as nested googlemap's canvas.
GoogleMap can't be displayed correctly.but when i using firebug to monitor http data,I found the googlemap's information has been returned to browser,but i don't know why it can't be displayed correctly? anyone can help me? thanks!
You should ensure that your module's entry html includes the <script> tag for maps:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Since you did see the googlemaps data, I would guess the APIs are being retrieved by your app and that the problem likely lies in the nested UI structure. In the few gwt-maps examples I've examined as well as in the app I'm working on, the map is maximized and and given its own <div> in the body of the entry html:
<body style="margin:0px;">
<div id="map_canvas" style="width:100%; height:100%">Map is loading...</div>
</body>
With deeply nested containers, there's more of a chance of the browser sizing something to zero. Using Firebug or any other DOM Inspector, walk the tree of the DOM objects from <document> down to your map object's containing <div>. Check to see if any of the height properties are 0px and maximize those container objects using CSS or GWT methods.
Please report your findings; I'm sure nesting maps in layouts will be a common goal in the future and we will all benefit from what you learn.