-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
88 lines (71 loc) · 3.69 KB
/
index.html
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
<!doctype html>
<html>
<head>
<title>Trigger box component by @Utopiah</title>
<meta name="description" content="Trigger box component by @Utopiah">
<script src="https://rawgit.com/aframevr/aframe/master/dist/aframe-v0.2.0.min.js"></script>
<script src="https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js"></script>
<script src="https://rawgit.com/Utopiah/aframe-triggerbox-component/master/aframe-triggerbox-component.js"></script>
</head>
<body>
<a-scene>
<a-assets>
</a-assets>
<a-entity position="0 1.8 4" triggerbox="width:5; height:5; depth:5;"
camera id="camera" look-controls="enabled: true" wasd-controls>
<a-cursor color="white"></a-cursor>
</a-entity>
<a-plane scale="5 5 5" rotation="-90 0 0"></a-plane>
<a-entity id="description" text="text: move in and out the plane" position="-6 1 -5" material="color: white" scale="2"></a-entity>
<a-entity id="description" text="text: using WASD to test" position="-4 0 -5" material="color: white" scale="2"></a-entity>
<a-entity id="action" text="text: " position="-7 2 -5" material="color: green" scale="2"></a-entity>
<a-sky id=background src="" color="lightblue" cross-origin=""></a-sky>
<a-sphere scale="0.5 0.5 0.5" color="blue" id="movingsphere" triggerbox="x0:-2; triggereventname: spheretest;">
<a-event name="spheretest_entered" color="green"></a-event>
<a-event name="spheretest_exited" color="red"></a-event>
<a-animation attribute="position" from="-2 0 0" to="2 0 0" dur="10000" repeat="indefinite" direction="alternate"></a-animation>
</a-sphere>
<a-entity id="movingaction" text="text: " position="-7 4 -5" material="color: orange" scale="2"></a-entity>
<a-box position="-2 0 0" material="transparent: true; opacity: 0.1; color:green;"></a-box>
</a-scene>
<script>
/* TODO
multiple entities, sets, etc
*/
var scene = document.querySelector('a-scene');
if (scene.hasLoaded) {
run();
} else {
scene.addEventListener('loaded', run);
}
function run () {
// assuming we kept the default trigger name
var camera = document.getElementById('camera');
camera.addEventListener('triggerbox_entered', function() {
console.log('just entered the trigger box (event)');
var action = document.getElementById('action');
action.setAttribute('text', 'text: entered the trigger box');
action.setAttribute('material', 'color: green');
});
camera.addEventListener('triggerbox_exited', function() {
console.log('just left the trigger box (event)');
var action = document.getElementById('action');
action.setAttribute('text', 'text: left the trigger box');
action.setAttribute('material', 'color: red');
});
// testing other element
var movingsphere = document.getElementById('movingsphere');
movingsphere.addEventListener('spheretest_entered', function() {
var action = document.getElementById('movingaction');
action.setAttribute('text', 'text: sphere entered the mini trigger box');
action.setAttribute('material', 'color: green');
});
movingsphere.addEventListener('spheretest_exited', function() {
var action = document.getElementById('movingaction');
action.setAttribute('text', 'text: sphere left the mini trigger box');
action.setAttribute('material', 'color: red');
});
}
</script>
</body>
</html>