-
Notifications
You must be signed in to change notification settings - Fork 0
/
cats_proximity_hands.html
112 lines (96 loc) · 5.05 KB
/
cats_proximity_hands.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!-- https://www.w3docs.com/snippets/javascript/how-to-create-and-trigger-event-in-javascript.html -->
<!-- https://devstephen.medium.com/keyboardevent-key-for-cross-browser-key-press-check-61dbad0a067a -->
<!doctype html>
<html lang="fr">
<title>Carresse le chat et il te donnera sa pattouuneee
SI C'EST PAS TROP MIGNON CA ?????
</title>
<head>
<meta charset="utf-8">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<!-- <script src="https://ensaama-officiel-numerique.github.io/components/detect/detect.js"></script> -->
<script src="https://ensaama-officiel-numerique.github.io/components/detect/detect.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
<script src="https://ensaama-officiel-numerique.github.io/components/debug/debug.js"></script>
<script>
AFRAME.registerComponent('test', {
init: function () {
//console.log(this.el)
console.log(this.el.getAttribute('mixin'));
}
});
</script>
<script>
// composant pour visualier les changements de hauteur
AFRAME.registerComponent('modify-color', {
init: function () {
let el = this.el;
console.log(el.id);
// Wait for event
this.el.addEventListener('bothup-3', () => { el.setAttribute('animation-mixer', {clip: 'idle', loop: 'once'}); });
this.el.addEventListener('bothup-2', () => { el.setAttribute('animation-mixer',{clip: 'Paw', loop: 'once'}); });
this.el.addEventListener('bothup-1', () => { el.setAttribute('animation-mixer', {clip: 'idle', loop: 'once'}); });
this.el.addEventListener('bothdown-2', () => { el.setAttribute('animation-mixer',{clip: 'Paw', loop: 'once'}); });
this.el.addEventListener('bothdown-1', () => { el.setAttribute('animation-mixer', {clip: 'idle', loop: 'once'}); });
this.el.addEventListener('bothdown-0', () => { el.setAttribute('animation-mixer',{clip: 'Paw', loop: 'once'}); });
}
});
// composant pour tester avec les clavier (sans manette)
AFRAME.registerComponent('change-height', {
init: function () {
let el = this.el;
let key = ['h','b'];
document.addEventListener('keypress', evt => {
for (var i = 0; i < key.length; i++) {
if (evt.key === key[0]) {
console.log("key '"+key[0]+"' was pressed");
let position = el.getAttribute('position');
el.setAttribute("position", position.x+" "+(position.y + 0.1)+" "+position.z);
}
if (evt.keyCode === key[1].codePointAt(0)) {
console.log("key '" + key[1] + "' was pressed");
let position = el.getAttribute('position');
el.setAttribute("position", position.x + " " + (position.y - 0.1) + " " + position.z);
}
}
});
}
});
</script>
</head>
<body>
<a-scene background="color: skyblue" frequency="delay: 500"
debug-keyboard="key: r; event: droiteup-2; target: #boite;">
<a-assets>
<a-asset-item id="fox" src="models/e.gltf"></a-asset-item>
<a-mixin id="idle" animation-mixer="clip: idle"></a-mixin>
<a-mixin id="walk" animation-mixer="clip: Walk"></a-mixin>
</a-assets>
<a-entity id="renard" position="-1 0 -2"
scale="1 1 1" gltf-model="#fox"
modify-color mixin="idle" test
hands-height="trace: true; side: both; seuils: 0.5, 1, 2"
>
</a-entity>
<a-plane position="0 0 -2" rotation="-90 0 0" width="4" height="4" color="gray">
</a-plane>
<!-- PLAYER -->
<a-entity id="cameraRig">
<!-- TETE -->
<a-entity id="tete" camera position="0 0.5 0" currentposition handsposition
look-controls wasd-controls="acceleration:10">
<a-text id="txtlog" value="" align="center" color="#FF0000" position="0 0 -1" rotation="0 0 0"
scale="0.25 0.25 0.25">
</a-text>
</a-entity>
<!-- MAIN GAUCHE : utiliser oculus-touch-controls pour model3D -->
<a-entity id="gauche" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffcccc">
</a-entity>
<!-- MAIN DROITE : utiliser oculus-touch-controls pour model3D -->
<a-entity id="droite" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffcccc" change-height>
</a-entity>
</a-entity>
</a-scene>
</body>
</html>