Is there something similar to z-index of CSS in aframe?
i.e, if I have two objects in the xz plane, how do I make one overlap the other?
There's no z-index but there's a z axis. In A-frame you're using a "right-handed coordinate system where the negative Z axis extends into the screen"
https://aframe.io/docs/0.7.0/components/position.html#value
This one helps visualize it:
https://www.evl.uic.edu/ralph/508S98/coordinates.html
So to play with the concept of z-index of two objects, you would change their z-axis position attributes:
<!-- front object -->
<a-entity position="0 0 -2"></a-entity>
<!-- back object -->
<a-entity position="0 0 -2.1"></a-entity>
Related
I have a a-plane nested in another a-plane.
<a-plane width="10" height="5" color="#FFFFFF">
<a-plane width="10" color="#000080"></a-plane>
</a-plane>
But the result looks like this
I also tried it with a nested a-image and had the same result. I also tried to remove the inner plane and add it outer and to the same position. But I've got always the same result.
A-Frame Version: 0.9.2
You've placed two planes in an identical position. The renderer does not know which one should be in front of another (since they are planes and their transforms are identical) - and hence you experience z-fighting.
You need to position one of the planes so that they won't overlap:
<a-plane>
<a-plane position='0 0 -0.001'>
</a-plane>
</a-plane>
I am rotating a glTF model of the moon. I want it to rotate around its center, rather than around the center of the scene.
I tried the answer here:
How to change the rotation axis for an animated A-Frame object?
but it doesn't seem to work for me (the object doesn't rotate at all).
I have tried the code here as well: https://blog.prototypr.io/learning-a-frame-how-to-do-animations-2aac1ae461da
But the object doesn't rotate when I use that either.
So far I have only been able to get it to rotate using this code:
<a-entity gltf-model="#moon" scale="0.5 0.5 0.5" position="0 0 0"
animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-entity>
But using that, it rotates around the center of the scene rather than rotating on it's own central axis, if that makes sense. (Global axis rather than local axis?)
This is how I am loading in A-Frame:
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
Add a parent entity around it then the model will rotate around that.
<a-entity>
<a-entity gltf-model="#moon" scale="0.5 0.5 0.5" position="0 0 0"
animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-entity>
</a-entity>
The other way to fix this is to place your axis in the 3D app that created the model, and export the gltf again.
When I create an a-plane and assign an attribute color="red", the color is applied to one side only. I added rotation animation to the plane and the back of the plane is white: fiddle.
What would be the method to get a plane colored from both sides? Should I create 2 planes of same color and then rotate one so that they are back to back and to the user looks like a single plane?
There is a material property called side. If you set it to double, the material will be applied both to front and back
<a-entity material="side: double"></a-entity>
updated codepen.
How can i add rounded edges/border radius to a a-plane?
<a-plane position="1 0.75 -3" geometry="width: 1.25; height: 1.25;depth: 1.25;"></a-plane>
i have to make a square with rounded edges
Rounded corners with a-plane is not possible. You can use the slice9 component
The "easy" suggestion in this case would be to create a rectangle graphic with rounded corners and save it as a png file. This image should be used as the texture of the plane.
Make sure that you use material="transparent:true" in the a-plane tag to ensure that no background shows behind the rounded corners.
As others have stated, if this is a one off and simply for visual effects, your best option is to make a custom texture and simply texture the plane.
However, if you require multiple or need it to interact with other elements, then you would be better off creating a custom geometry or component. There is an example on the three.js website on how to extrude a flat square into an beveled object. You could create a custom component and feed it the length and width, this would then let you use the regular material options on it too.
<a-videosphere src="myvideo.mp4"> displays a video on an entire 360-degree sphere, but I want to display a video or image, but only on a portion of a sphere like a hemisphere. Something like:
(from MathWorld - A Wolfram Web Resource: wolfram.com)
How would I do this in A-Frame?
You can use the sphere geometry (<a-entity geometry="primitive: sphere"> or <a-sphere>) and control the phiLength/thetaLength angles of the sphere to specify a segment. Theta length controls horizontal sweep angle and phi length controls vertical sweep angle:
(source: mediabox.fr)
For a hemisphere, we would do:
<a-entity geometry="primitive: sphere; thetaLength: 180; radius: 5000; segmentsWidth: 64; segmentsHeight: 20" scale="1 1 -1" material="src: #myVideo; shader: flat"></a-entity>
Or:
<a-sphere theta-length="180">
And then apply the material.
For videosphere, we can update it:
<a-videosphere src="#myVideo" geometry="thetaLength: 180"></a-videosphere>
However, the video won't be cropped as you'd expect. So you might have to crop beforehand. If you want it to crop like background-size: cover, we might have to do something special like hide portions of the sphere.