-
Notifications
You must be signed in to change notification settings - Fork 0
/
Facefilters.html
116 lines (104 loc) · 5.39 KB
/
Facefilters.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
113
114
115
116
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/dist/mindar-face.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/dist/mindar-face-aframe.prod.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const list = ["glasses1", "glasses2", "hat1", "hat2", "earring"];
const visibles = [true, false, false, true, true];
const setVisible = (button, entities, visible) => {
if (visible) {
button.classList.add("selected");
} else {
button.classList.remove("selected");
}
entities.forEach((entity) => {
entity.setAttribute("visible", visible);
});
}
list.forEach((item, index) => {
const button = document.querySelector("#" + item);
const entities = document.querySelectorAll("." + item + "-entity");
setVisible(button, entities, visibles[index]);
button.addEventListener('click', () => {
visibles[index] = !visibles[index];
setVisible(button, entities, visibles[index]);
});
});
})
</script>
<style>
body {
margin: 0;
}
.example-container {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
}
.options-panel {
position: fixed;
left: 0;
top: 0;
z-index: 2;
}
.options-panel img {
border: solid 2px;
width: 50px;
height: 50px;
object-fit: cover;
cursor: pointer;
}
.options-panel img.selected {
border-color: green;
}
</style>
</head>
<body>
<div class="example-container">
<div class="options-panel">
<img id="hat1" src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/examples/face-tracking/assets/hat/thumbnail.png"/>
<img id="hat2" src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/examples/face-tracking/assets/hat2/thumbnail.png"/>
<img id="glasses1" src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/examples/face-tracking/assets/glasses/thumbnail.png"/>
<img id="glasses2" src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/examples/face-tracking/assets/glasses2/thumbnail.png"/>
<img id="earring" src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/examples/face-tracking/assets/earring/thumbnail.png"/>
</div>
<a-scene mindar-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<a-asset-item id="headModel" src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/examples/face-tracking/assets/sparkar/headOccluder.glb"></a-asset-item>
<a-asset-item id="glassesModel" src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/examples/face-tracking/assets/glasses/scene.gltf"></a-asset-item>
<a-asset-item id="glassesModel2" src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/examples/face-tracking/assets/glasses2/scene.gltf"></a-asset-item>
<a-asset-item id="hatModel" src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/examples/face-tracking/assets/hat/scene.gltf"></a-asset-item>
<a-asset-item id="hatModel2" src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/examples/face-tracking/assets/hat2/scene.gltf"></a-asset-item>
<a-asset-item id="earringModel" src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/examples/face-tracking/assets/earring/scene.gltf"></a-asset-item>
</a-assets>
<a-camera active="false" position="0 0 0"></a-camera>
<!-- head occluder -->
<a-entity mindar-face-target="anchorIndex: 168">
<a-gltf-model mindar-face-occluder position="0 -0.3 0.15"rotation="0 0 0" scale="0.065 0.065 0.065" src="#headModel"></a-gltf-model>
</a-entity>
<a-entity mindar-face-target="anchorIndex: 10">
<a-gltf-model rotation="0 -0 0" position="0 1.0 -0.5" scale="0.35 0.35 0.35" src="#hatModel" class="hat1-entity" visible="false"></a-gltf-model>
</a-entity>
<a-entity mindar-face-target="anchorIndex: 10">
<a-gltf-model rotation="0 -0 0" position="0 -0.2 -0.5" scale="0.008 0.008 0.008" src="#hatModel2" class="hat2-entity" visible="false"></a-gltf-model>
</a-entity>
<a-entity mindar-face-target="anchorIndex: 168">
<a-gltf-model rotation="0 -0 0" position="0 0 0" scale="0.01 0.01 0.01" src="#glassesModel" class="glasses1-entity" visible="false"></a-gltf-model>
</a-entity>
<a-entity mindar-face-target="anchorIndex: 168">
<a-gltf-model rotation="0 -90 0" position="0 -0.3 0" scale="0.6 0.6 0.6" src="#glassesModel2" class="glasses2-entity" visible="false"></a-gltf-model>
</a-entity>
<a-entity mindar-face-target="anchorIndex: 127">
<a-gltf-model rotation="-0.1 -0 0" position="0 -0.3 -0.3" scale="0.05 0.05 0.05" src="#earringModel" class="earring-entity" visible="false"></a-gltf-model>
</a-entity>
<a-entity mindar-face-target="anchorIndex: 356">
<a-gltf-model rotation="0.1 -0 0" position="0 -0.3 -0.3" scale="0.05 0.05 0.05" src="#earringModel" class="earring-entity" visible="false"></a-gltf-model>
</a-entity>
</a-scene>
</div>
</body>
</html>