aFrameByCode/event.html at master · faace/aFrameByCode · 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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>An event demo of A-Frame-By-Code</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://faace.github.io/aFrameByCode/dist/aFrameByCode.min.js"></script>
</head>

<body>
    <script>
        AFRAME.registerComponent('counter', {
            schema: {
                step: { type: 'int', default: 1 }
            },
            init: function () {
                this.on('Counter'); // listen the "Counter" event.
            },
            onCounter: function (event) { // define a handle function for the "Counter" event, the function name should be on+EventName
                var num = event.data.num;
                this.el.setAttribute('value', Math.floor(num / this.data.step));
            }
        });
        AFRAME.createAScene({
            id: 'scene1',
            onInit: function (scene) {
                scene.addEntities({
                    'a-text#left': { position: '-2 2 -4', value: "0", color: "red", counter: 'step: 1' },
                    'a-text#mid': { position: '0 2 -4', value: "0", color: "green", counter: 'step: 2' },
                    'a-text#right': { position: '2 2 -4', value: "0", color: "blue", counter: 'step: 3' },
                });

                var num = 0;
                setInterval(function () {
                    this.emit('Counter', { num: ++num }); // send the "Counter" event
                }.bind(this), 1000);
            },
        });
        AFRAME.loadScene('scene1');
    </script>
</body>

</html>