我想在A框架中显示带有相关位移图的图像。我的目标是使图像具有Facebook 3D照片风格的3D深度效果。图像和深度图是1024x1024 PNG。
这是我尝试过的:
<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>
这将显示一个带有图像纹理的平面,但是它是平坦的,没有位移效果。我想念什么?
置换图仅移动平面的现有顶点,即角。为了获得映射的位移效果,您需要使用segments-height
和segments-width
属性将平面细分为较小的三角形。