BelajarAFrame/16-CustomComponent-InitModification.html at main · hadziq/BelajarAFrame · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengembangkan A-Frame</title>
    <!-- A-Frame dikembangkan di atas Three.js -->
    <!-- berbasis entity-component framework,
    semua di bawah scene adalah entity,
    setiap entity punya satu atau lebih component(s) -->
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
</head>
<body>
    <script>
        AFRAME.registerComponent('foo',{
            schema: {
                message1: {type:"string", default:"Some"},
                message2: {type:"string", default:"Entity"}
            },
            init:function() {
                console.log(this.data.message1 + " " + this.data.message2);
                console.log(this.el);
                let box = document.querySelector("#box1");
                console.log(box);
                // Karena this tidak terdeteksi di dalam event listener
                let data = this.data;
                let el = this.el;
                this.el.addEventListener('click', function(ev) {
                    console.log(data.message1 + " " + data.message2 + " was clicked");
                    ev.srcElement.setAttribute('foo','message1:Alternative');
                    let clickedData = ev.srcElement.getAttribute('position');
                    console.log(clickedData);
                    let y1 = clickedData.y + 0.5;
                    ev.srcElement.setAttribute('position', clickedData.x + ' ' + y1 + ' -3')
                });
            }
        });
    </script>
    <a-scene>
        <a-camera><a-cursor></a-cursor></a-camera>
        <a-box
            foo
            id="box1"
            material="color:red"
            position="-2 1.5 -3"
        ></a-box>
        <a-box
            foo="message1:New;message2:Box"
            id="box1"
            material="color:green"
            position="2 1.5 -3"
        ></a-box>
    </a-scene>
</body>
</html>