-
Notifications
You must be signed in to change notification settings - Fork 0
/
cubeAnim.js
49 lines (42 loc) · 1.07 KB
/
cubeAnim.js
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
document.addEventListener("DOMContentLoaded", () => {
//cube animation
let isSpinning = false;
document.querySelector(".canvas").addEventListener('click', () => {
if (isSpinning){
isSpinning = false;
} else{
isSpinning = true;
}
});
const illo = new Zdog.Illustration({
element: '.canvas',
zoom: .5,
dragRotate: true,
onDragStart: function() {
isSpinning = false;
}
})
const cube = new Zdog.Box({
addTo: illo,
width: 40,
height: 40,
depth: 20,
stroke: 10,
leftFace: "rgb(200,200,200)",
rightFace: "rgb(0,0,0)",
topFace: "rgb(255, 101, 101)",
bottomFace: "rgb(151, 243, 255)",
})
illo.rotate.y = 10
illo.rotate.x = 98
illo.updateRenderGraph();
function animate() {
if (isSpinning) {
illo.rotate.y += 0.008;
illo.rotate.x += 0.008;
}
illo.updateRenderGraph();
requestAnimationFrame(animate);
}
animate();
});