Skip to content

Commit bb2caa7

Browse files
GudahttGudahtt
authored
Add mask support (#76)
The logo now supports masks. A `<mask>` allows selectively making parts of the model partially or entirely transparent. A demo of this functionality has been added, called "fade". It shows the regular fox fading out from bottom to top, except the eyes remain completely opaque.
1 parent 5645411 commit bb2caa7

File tree

6 files changed

+457
-3
lines changed

6 files changed

+457
-3
lines changed

‎demo/src/fade/fade-fox.json‎

Lines changed: 356 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,356 @@
1+
{
2+
"positions": [
3+
[111.024597, 52.604599, 46.225899],
4+
[114.025002, 87.673302, 58.9818],
5+
[66.192001, 80.898003, 55.394299],
6+
[72.113297, 35.491798, 30.871401],
7+
[97.804497, 116.560997, 73.978798],
8+
[16.7623, 58.010899, 58.078201],
9+
[52.608898, 30.3641, 42.556099],
10+
[106.881401, 31.945499, 46.9133],
11+
[113.484596, 38.6049, 49.121498],
12+
[108.6633, 43.2332, 46.315399],
13+
[101.216599, 15.9822, 46.308201],
14+
[16.6605, -16.2883, 93.618698],
15+
[40.775002, -10.2288, 85.276398],
16+
[23.926901, -2.5103, 86.736504],
17+
[11.1691, -7.0037, 99.377602],
18+
[9.5692, -34.393902, 141.671997],
19+
[12.596, 7.1655, 88.740997],
20+
[61.180901, 8.8142, 76.996803],
21+
[39.719501, -28.927099, 88.963799],
22+
[13.7962, -68.575699, 132.057007],
23+
[15.2674, -62.32, 129.688004],
24+
[14.8446, -52.6096, 140.113007],
25+
[12.8917, -49.771599, 144.740997],
26+
[35.604198, -71.758003, 81.063904],
27+
[47.462502, -68.606102, 63.369701],
28+
[38.2486, -64.730202, 38.909901],
29+
[-12.8917, -49.771599, 144.740997],
30+
[-13.7962, -68.575699, 132.057007],
31+
[17.802099, -71.758003, 81.063904],
32+
[19.1243, -69.0168, 49.420101],
33+
[38.2486, -66.275597, 17.776199],
34+
[12.8928, -36.703499, 141.671997],
35+
[109.283997, -93.589897, 27.824301],
36+
[122.117996, -36.8894, 35.025002],
37+
[67.7668, -30.197001, 78.417801],
38+
[33.180698, 101.851997, 25.3186],
39+
[9.4063, -35.589802, 150.722],
40+
[-9.5692, -34.393902, 141.671997],
41+
[-9.4063, -35.589802, 150.722],
42+
[11.4565, -37.899399, 150.722],
43+
[-12.596, 7.1655, 88.740997],
44+
[-11.1691, -7.0037, 99.377602],
45+
[70.236504, 62.836201, -3.9475],
46+
[47.263401, 54.293999, -27.414801],
47+
[28.7302, 91.731102, -24.972601],
48+
[69.167603, 6.5862, -12.7757],
49+
[28.7302, 49.1003, -48.3596],
50+
[31.903, 5.692, -47.821999],
51+
[35.075802, -34.432899, -16.280899],
52+
[115.284103, 48.681499, 48.684101],
53+
[110.842796, 28.4821, 49.176201],
54+
[-19.1243, -69.0168, 49.420101],
55+
[-38.2486, -66.275597, 17.776199],
56+
[-111.024597, 52.604599, 46.225899],
57+
[-72.113297, 35.491798, 30.871401],
58+
[-66.192001, 80.898003, 55.394299],
59+
[-114.025002, 87.673302, 58.9818],
60+
[-97.804497, 116.560997, 73.978798],
61+
[-52.608898, 30.3641, 42.556099],
62+
[-16.7623, 58.010899, 58.078201],
63+
[-106.881401, 31.945499, 46.9133],
64+
[-108.6633, 43.2332, 46.315399],
65+
[-113.484596, 38.6049, 49.121498],
66+
[-101.216599, 15.9822, 46.308201],
67+
[-16.6605, -16.2883, 93.618698],
68+
[-23.926901, -2.5103, 86.736504],
69+
[-40.775002, -10.2288, 85.276398],
70+
[-61.180901, 8.8142, 76.996803],
71+
[-39.719501, -28.927099, 88.963799],
72+
[-14.8446, -52.6096, 140.113007],
73+
[-15.2674, -62.32, 129.688004],
74+
[-47.462502, -68.606102, 63.369701],
75+
[-35.604198, -71.758003, 81.063904],
76+
[-38.2486, -64.730202, 38.909901],
77+
[-17.802099, -71.758003, 81.063904],
78+
[-12.8928, -36.703499, 141.671997],
79+
[-67.7668, -30.197001, 78.417801],
80+
[-122.117996, -36.8894, 35.025002],
81+
[-109.283997, -93.589897, 27.824301],
82+
[-33.180698, 101.851997, 25.3186],
83+
[-11.4565, -37.899399, 150.722],
84+
[-70.236504, 62.836201, -3.9475],
85+
[-28.7302, 91.731102, -24.972601],
86+
[-47.263401, 54.293999, -27.414801],
87+
[-69.167603, 6.5862, -12.7757],
88+
[-28.7302, 49.1003, -48.3596],
89+
[-31.903, 5.692, -47.821999],
90+
[-35.075802, -34.432899, -16.280899],
91+
[-115.284103, 48.681499, 48.684101],
92+
[-110.842796, 28.4821, 49.176201]
93+
],
94+
"chunks": [
95+
{
96+
"color": [119, 57, 0],
97+
"faces": [
98+
[0, 1, 2],
99+
[2, 3, 0],
100+
[4, 5, 2],
101+
[6, 3, 2],
102+
[2, 5, 6],
103+
[7, 8, 9],
104+
[10, 3, 6],
105+
[10, 50, 7],
106+
[7, 3, 10],
107+
[7, 9, 3],
108+
[49, 0, 9],
109+
[3, 9, 0],
110+
[53, 54, 55],
111+
[55, 56, 53],
112+
[57, 56, 55],
113+
[58, 59, 55],
114+
[55, 54, 58],
115+
[60, 61, 62],
116+
[63, 58, 54],
117+
[63, 60, 89],
118+
[60, 63, 54],
119+
[60, 54, 61],
120+
[88, 61, 53],
121+
[54, 53, 61],
122+
[2, 1, 4],
123+
[55, 59, 57]
124+
],
125+
"mask": "everything-but-eyes-mask"
126+
},
127+
{
128+
"color": [72, 102, 134],
129+
"faces": [
130+
[11, 12, 13],
131+
[64, 65, 66]
132+
],
133+
"name": "eyes"
134+
},
135+
{
136+
"color": [228, 116, 36],
137+
"faces": [
138+
[14, 15, 11],
139+
[11, 16, 14],
140+
[17, 12, 18],
141+
[41, 64, 37],
142+
[67, 68, 66]
143+
],
144+
"mask": "everything-but-eyes-mask"
145+
},
146+
{
147+
"color": [192, 172, 157],
148+
"faces": [
149+
[19, 20, 21],
150+
[21, 22, 19],
151+
[20, 19, 23],
152+
[23, 24, 20],
153+
[23, 25, 24],
154+
[19, 22, 26],
155+
[26, 27, 19],
156+
[23, 28, 29],
157+
[23, 29, 30],
158+
[25, 23, 30],
159+
[29, 51, 52],
160+
[52, 30, 29],
161+
[27, 26, 69],
162+
[69, 70, 27],
163+
[70, 71, 72],
164+
[72, 27, 70],
165+
[72, 71, 73],
166+
[51, 74, 72],
167+
[52, 51, 72],
168+
[73, 52, 72],
169+
[19, 27, 74],
170+
[74, 28, 19],
171+
[51, 29, 28],
172+
[28, 74, 51],
173+
[74, 27, 72],
174+
[28, 23, 19]
175+
],
176+
"mask": "everything-but-eyes-mask"
177+
},
178+
{
179+
"color": [214, 194, 178],
180+
"faces": [
181+
[21, 20, 24],
182+
[24, 31, 21],
183+
[69, 71, 70],
184+
[71, 69, 75]
185+
],
186+
"mask": "everything-but-eyes-mask"
187+
},
188+
{
189+
"color": [228, 119, 25],
190+
"faces": [
191+
[31, 24, 18],
192+
[6, 5, 16],
193+
[16, 17, 6],
194+
[24, 32, 33],
195+
[33, 34, 24],
196+
[5, 4, 35],
197+
[75, 68, 71],
198+
[58, 67, 40],
199+
[40, 59, 58],
200+
[71, 76, 77],
201+
[77, 78, 71]
202+
],
203+
"mask": "everything-but-eyes-mask"
204+
},
205+
{
206+
"color": [205, 98, 0],
207+
"faces": [
208+
[24, 34, 18],
209+
[16, 13, 12],
210+
[12, 17, 16],
211+
[13, 16, 11],
212+
[71, 68, 76],
213+
[40, 67, 66],
214+
[66, 65, 40],
215+
[65, 64, 40]
216+
],
217+
"mask": "everything-but-eyes-mask"
218+
},
219+
{
220+
"color": [0, 0, 0],
221+
"faces": [
222+
[36, 15, 37],
223+
[37, 38, 36],
224+
[31, 39, 22],
225+
[22, 21, 31],
226+
[31, 15, 36],
227+
[36, 39, 31],
228+
[75, 69, 26],
229+
[26, 80, 75],
230+
[75, 80, 38],
231+
[38, 37, 75],
232+
[38, 80, 39],
233+
[39, 36, 38],
234+
[39, 80, 26],
235+
[26, 22, 39]
236+
],
237+
"mask": "everything-but-eyes-mask"
238+
},
239+
{
240+
"color": [247, 132, 25],
241+
"faces": [
242+
[17, 33, 10],
243+
[17, 18, 34],
244+
[34, 33, 17],
245+
[10, 6, 17],
246+
[11, 15, 31],
247+
[31, 18, 11],
248+
[18, 12, 11],
249+
[14, 16, 40],
250+
[40, 41, 14],
251+
[59, 5, 35],
252+
[35, 79, 59],
253+
[67, 63, 77],
254+
[67, 77, 76],
255+
[76, 68, 67],
256+
[63, 67, 58],
257+
[64, 68, 75],
258+
[75, 37, 64],
259+
[68, 64, 66],
260+
[14, 41, 37],
261+
[37, 15, 14],
262+
[5, 59, 40],
263+
[40, 16, 5]
264+
],
265+
"mask": "everything-but-eyes-mask"
266+
},
267+
{
268+
"color": [225, 119, 25],
269+
"faces": [
270+
[35, 4, 42],
271+
[4, 1, 42],
272+
[42, 43, 44],
273+
[44, 35, 42],
274+
[45, 43, 42],
275+
[42, 10, 45],
276+
[30, 32, 24],
277+
[24, 25, 30],
278+
[30, 33, 32],
279+
[33, 30, 10],
280+
[44, 43, 46],
281+
[43, 45, 47],
282+
[47, 46, 43],
283+
[48, 47, 45],
284+
[45, 30, 48],
285+
[30, 45, 10],
286+
[49, 42, 0],
287+
[8, 7, 42],
288+
[50, 42, 7],
289+
[50, 10, 42],
290+
[1, 0, 42],
291+
[42, 9, 8],
292+
[42, 49, 9],
293+
[64, 41, 40],
294+
[57, 59, 79],
295+
[79, 81, 57],
296+
[57, 81, 56],
297+
[82, 79, 35],
298+
[35, 44, 82],
299+
[81, 79, 82],
300+
[82, 83, 81],
301+
[84, 63, 81],
302+
[81, 83, 84],
303+
[44, 46, 85],
304+
[85, 82, 44],
305+
[52, 73, 71],
306+
[71, 78, 52],
307+
[52, 78, 77],
308+
[77, 63, 52],
309+
[82, 85, 83],
310+
[83, 85, 86],
311+
[86, 84, 83],
312+
[87, 52, 84],
313+
[84, 86, 87],
314+
[52, 63, 84],
315+
[88, 53, 81],
316+
[62, 81, 60],
317+
[89, 60, 81],
318+
[89, 81, 63],
319+
[56, 81, 53],
320+
[81, 62, 61],
321+
[81, 61, 88],
322+
[48, 87, 86],
323+
[86, 47, 48],
324+
[47, 86, 85],
325+
[85, 46, 47],
326+
[48, 30, 52],
327+
[52, 87, 48]
328+
],
329+
"mask": "everything-but-eyes-mask"
330+
}
331+
],
332+
"gradients": {
333+
"mask-gradient": {
334+
"gradientUnits": "userSpaceOnUse",
335+
"type": "linear",
336+
"x1": "50%",
337+
"x2": "50%",
338+
"y1": "150%",
339+
"y2": "0%",
340+
"stops": [
341+
{
342+
"stop-color": "#FFFFFF"
343+
},
344+
{
345+
"offset": "1",
346+
"stop-color": "#000000"
347+
}
348+
]
349+
}
350+
},
351+
"masks": {
352+
"everything-but-eyes-mask": {
353+
"color": "url('#mask-gradient')"
354+
}
355+
}
356+
}

‎demo/src/fade/fade.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const copy = require('copy-to-clipboard');
2+
const createViewer = require('../../..');
3+
const { svgElementToSvgImageContent } = require('../../../util');
4+
const meshJson = require('./fade-fox.json');
5+
6+
document.addEventListener('keypress', function (event) {
7+
if (event.keyCode === 99) {
8+
// the c key
9+
const svg = document.querySelector('svg');
10+
const content = svgElementToSvgImageContent(svg);
11+
copy(content);
12+
}
13+
});
14+
15+
createViewer({
16+
width: 0.4,
17+
height: 0.4,
18+
followMouse: true,
19+
followMotion: true,
20+
meshJson,
21+
});

‎demo/src/fade/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="../style.css">
5+
<title>---</title>
6+
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
7+
<meta charset=utf-8>
8+
</head>
9+
<body>
10+
<div></div>
11+
<script src="bundle.js"></script>
12+
<p>Press C to copy the SVG text of the image.</p>
13+
</body>
14+
</html>

0 commit comments

Comments
 (0)