aframe-interior-parallax-mapping/index.html at master · kylebakerio/aframe-interior-parallax-mapping · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
    <script src="interior-parallax.js"></script>
<!--   implementation of http://venolabs.com/three-interior-mapping/ as an a-frame component   -->
  </head>
  <body>
    <a-scene>
      <a-entity position="-1 -1 -3"  rotation="90 0 0">
        <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
        <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
        <a-plane id="window"
                 interior-parallax="
                  path: https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/;
                  px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
                  py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
                  pz:ao1z9-sve70-005.png?v=1677364885826; nz:ao1z9-sve70-006.png?v=1677364888191;"
                 side="double"
                 position="0 0 -4" rotation="-90 0 0" width="4" height="4"
        ></a-plane>

        <a-plane id="window2"
                 interior-parallax="
                  equirectangular: https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/tu09tpc-a-large-bed-in-a-room.jpeg?v=1677370054339;"
                 side="double"
                 position="4 0 -4" rotation="-90 0 0" width="4" height="4"
        ></a-plane>

        <a-plane id="window2"
                 interior-parallax="
                  equirectangular: https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/pixexid-6308af11-7cac-4a02-8565-658f51e634a4.jpeg?v=1677381243964;"
                 side="double"
                 position="-4 0 -4" rotation="-90 0 0" width="4" height="4"
        ></a-plane>

      </a-entity>


      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>