-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtrial-Zdog.html
105 lines (94 loc) · 2.58 KB
/
trial-Zdog.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Zdog Tutorial</title>
<script src="./zdog.dist.min.js"></script>
</head>
<body>
<canvas width="240" height="240" class="zdog-canvas"></canvas>
<script>
// 初期設定(色)
const orange = '#E62';
const garnet = '#C25';
const eggplant = '#636';
/*
Zdog全体管理変数(Illustration)
element:canvasタグとの紐づけ
dragRotate:dragによる回転設定
*/
const illo = new Zdog.Illustration({
element: '.zdog-canvas',
dragRotate: true,
});
/*
Z軸の円形モデル生成
addTo：Zdog全体管理変数に追加
diameter:？？？
quarters:円の分割ぐあい
closed:ドーナツ型ではない設定
translate:モデルの空間座標
scale:？？？
stroke:？？？
fill:？？？
color:モデルの色
*/
var zCircle = new Zdog.Ellipse({
addTo: illo,
diameter: 50,
quarters: 2,
closed: true,
translate: { z: 100 },
scale: 1,
stroke: 40,
fill: true,
color: eggplant,
});
// z line
new Zdog.Shape({
addTo: zCircle,
path: [{}, zCircle.translate.copy().multiply({ z: -1 })],
scale: 1 / zCircle.scale.z,
stroke: 2,
color: zCircle.color,
});
var xRect = new Zdog.Rect({
addTo: illo,
width: 20,
height: 20,
translate: { x: 40 },
stroke: 8,
fill: true,
color: garnet,
});
// x line
new Zdog.Shape({
addTo: xRect,
path: [{}, xRect.translate.copy().multiply({ x: -1 })],
stroke: 2,
color: xRect.color,
});
var yTri = new Zdog.Polygon({
addTo: illo,
radius: 10,
sides: 3,
translate: { y: -60 },
stroke: 8,
fill: true,
color: orange,
});
// y line
new Zdog.Shape({
addTo: yTri,
path: [{}, yTri.translate.copy().multiply({ y: -1 })],
stroke: 2,
color: yTri.color,
});
function animate() {
illo.updateRenderGraph();
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>