I want to display an image with an associated displacement map in A-Frame. My goal is to give the image a 3D depth effect in the style of Facebook 3D Photos. The image and the depth map are 1024x1024 PNGs.
Here's what I've tried:
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<title>Displacement</title>
</head>
<body>
<a-scene>
<a-assets>
<img id="texture" src="texture.png">
<img id="displacement" src="displacement.png">
</a-assets>
<a-plane
src="#texture"
width="250"
height="250"
position="0 0 -200"
displacement-map="#displacement"
displacement-bias="0"
displacement-scale="60"
></a-plane>
</a-scene>
</body>
</html>
This displays a plane textured with the image, but it's flat with no displacement effect. What am I missing?
The displacement map only moves the existing vertices of the plane, i.e. the corners. In order to get a mapped displacement effect, you need to subdivide the plane into smaller triangles with the segments-height and segments-width attributes.
Related
I followed the docs exactly as described (refer
https://aframe.io/docs/master/components/scale.html)
in a super basic WebVR scene on Glitch and it seems the code related to reflecting a sphere along the Z-axis won't work. It seems to be fairly straightforward, so I can't imagine why there should be any trouble. Am I doing something stupid or is it really not working? I know I could use a-sky but I want more control over position, rotation, etc (it needs to be an element in the world).
A-Frame Version: 1.0.4
Platform / Device: Windows ASUS Rog Zephyrus Laptop, Desktop browser (tested on Firefox and Edge)
Reproducible Code Snippet or URL: https://east-stock.glitch.me/. Ideally, you shouldn't be able to see the sphere from "outside" it, as in this scene, and the red should appear once you navigate "inside" the sphere.
Just so you have it, this is what I put in my scene:
<a-entity
geometry="primitive: sphere; radius: 4"
material="color: red"
scale="1 1 -1"
position="0 0 -5"
></a-entity>
You need to add some properties to the material of the sphere to get it to work.
<a-entity
geometry="primitive: sphere; radius: 4"
material="color: red; side: back; shader: flat; "
scale="1 1 1"
position="0 0 -5"
></a-entity>
You only want to show the 'back' of the faces of the sphere, that's what the side:back does. You probably don't want the sphere to reflect the light, therefore in this case I would add the shader:flat parameter so it is rendered flat.
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>
I use A-Frame for displaying a 360 image. By default the camera rotates when you click and drag it. But I want that A-Frame let the the camera rotates when mouse rolls over.
Here is my code:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
<a-sky src="SAM_100_2981.jpg" rotation="0 -100 0"></a-sky>
</a-scene>
I have a cylinder in A-Frame with a texture applied to the outside. I want to make this an igloo I can go inside. How do I apply the texture also to the inside of the cylinder?
<a-cylinder></a-cylinder>
<a-entity geometry="primitive: cylinder" material="src: #texture"></a-entity>
You can set the material.side to double to render on both sides of the mesh. https://aframe.io/docs/0.3.0/components/material.html#properties
<a-cylinder side="double"></a-cylinder>
<a-entity geometry="primitive: cylinder" material="src: #texture; side: double"></a-entity>
<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.