Как применить карту смещения к плоскости в A-Frame? - PullRequest
Новая
       4

Как применить карту смещения к плоскости в A-Frame?

0 голосов
/ 28 марта 2020

Я хочу отобразить изображение со связанной картой смещения в A-Frame. Моя цель - придать изображению трехмерный эффект глубины в стиле Facebook 3D Photos. Изображение и карта глубины имеют размер 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>

Это отображает плоскость, текстурированную с изображением, но она плоская без эффекта смещения. Чего мне не хватает?

1 Ответ

0 голосов
/ 29 марта 2020

Карта смещения только перемещает существующие вершины плоскости, то есть углы. Чтобы получить эффект смещения, вам нужно разделить плоскость на более мелкие треугольники с атрибутами segments-height и segments-width.

...