superpositions/imageChange.html at main · AtelierNum/superpositions · 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!doctype html>
<html>

<head>
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js">

  </script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/3.4.5/aframe/build/aframe-ar.js">

  </script>


<script defer>
  AFRAME.registerComponent("randomcombination", {
    init: function () {

      this.imageList0 = ["#i1_1", "#i1_2", "#i1_3", "#i1_4","#i1_5", "#i1_6"]
      this.imageList1 = ["#i2_1", "#i2_2", "#i2_3", "#i2_4","#i2_5", "#i2_6"]
      this.imageList2 = ["#i3_1", "#i3_2", "#i3_3", "#i3_4","#i3_5", "#i3_6"]
      this.imageList3 = ["#portrait1", "#portrait2", "#portrait3", "#portrait4","#portrait5", "#portrait6"]

      this.trackedElements = document.querySelectorAll(
        "a-marker[randomcombination]"
      );

      this.index = 0;

      document.addEventListener('click', () => {
        this.index = (this.index + 1) % 6;
      });

    },
    tick: function () {
      for (let i = 0; i < this.trackedElements.length; i++) {
        const markerValue = this.trackedElements[i].attributes.value.value;
        const imageElement = document.querySelector(`a-marker[value="${markerValue}"] a-image`);

        let newImg;
        if (i === 0) newImg = this.imageList0[this.index];
        else if (i === 1) newImg = this.imageList1[this.index];
        else if (i === 2) newImg = this.imageList2[this.index];
        else if (i === 3) newImg = this.imageList3[this.index];

        if (newImg) {
          imageElement.setAttribute('src', newImg);
        }
      }
    }}
  );

</script>
</head>

<body style="margin : 0px; overflow: hidden;">

  <a-scene embedded
    arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; trackingMethod: best ; changeMatrixMode: modelViewMatrix; labelingMode:black_region;"
    vr-mode-ui="enabled: false"
    renderer="sortObjects: true; antialias: true; colorManagement: true; physicallyCorrectLights; logarithmicDepthBuffer: true;"
    smooth=" true" smoothCount="5" smoothTolerance=".05" smoothThreshold="5" sourceWidth="800" sourceHeight="600"
    displayWidth="1920" displayHeight="1080">

    <a-assets>
      <img id="i00" src="./images/00.png">
      <img id="i1_1" src="./images/M1_1.png">
      <img id="i1_2" src="./images/M1_2.png">
      <img id="i1_3" src="./images/M1_3.png">
      <img id="i1_4" src="./images/M1_4.png">
      <img id="i1_5" src="./images/M1_5.png">
      <img id="i1_6" src="./images/M1_6.png">
      <img id="i2_1" src="./images/M2_1.png">
      <img id="i2_2" src="./images/M2_2.png">
      <img id="i2_3" src="./images/M2_3.png">
      <img id="i2_4" src="./images/M2_4.png">
      <img id="i2_5" src="./images/M2_5.png">
      <img id="i2_6" src="./images/M2_6.png">
      <img id="i3_1" src="./images/M3_1.png">
      <img id="i3_2" src="./images/M3_2.png">
      <img id="i3_3" src="./images/M3_3.png">
      <img id="i3_4" src="./images/M3_4.png">
      <img id="i3_5" src="./images/M3_5.png">
      <img id="i3_6" src="./images/M3_6.png">
      <img id="portrait1" src="./images/portrait1.jpg">
      <img id="portrait2" src="./images/portrait2.jpg">
      <img id="portrait3" src="./images/portrait3.png">
      <img id="portrait4" src="./images/portrait4.png">
      <img id="portrait5" src="./images/portrait5.png">
      <img id="portrait6" src="./images/portrait6.png">
    </a-assets>


    <a-marker randomcombination type="barcode" value="0" size="1.5">
      <a-image src="#i00" rotation="90 0 0" width="1" height="1"></a-image>
    </a-marker>

    <a-marker randomcombination type="barcode" value="1" size="1.5">
      <a-image src="#i00" rotation="90 0 0" width="1" height="1"></a-image>
    </a-marker>

    <a-marker randomcombination type="barcode" value="2" size="1">
      <a-image src="#i00" rotation="90 0 0" width="1" height="1"></a-image>
    </a-marker>

    <a-marker randomcombination type="barcode" value="3" size="1">
      <a-image src="#i00" rotation="90 0 0" width="1" height="1"></a-image>
    </a-marker>


    <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

  </a-scene>

</body>

</html>