BelajarAFrame/15-CustomComponent-ScriptingJS.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
<!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 adalah tempat oper-operan data dari/ke komponen (parameter)
            // Schema bisa single (seperti position) bisa multiple (seperti material)
            // schema: {
            //     type:"string", default:"Entity"
            // },
            // init:function() {
            //     console.log("Hello " + this.data);
            // }
            schema: {
                message1: {type:"string", default:"Some"},
                message2: {type:"string", default:"Entity"}
            },
            init:function() {
                console.log(this.data.message1 + " " + this.data.message2);
            }
        });
    </script>
    <a-scene>
        <a-entity foo></a-entity>
        <a-box
            foo="message1:New;message2:Box"
            id="box1"
            material="color:red"
            position="0 1.5 -3"
        ></a-box>
    </a-scene>
</body>
</html>