Multi-perspective 3D rotatable HTML5 Logo animation_html5 tutorial skills

This is a 3D animation special effect based on HTML5 and CSS3. Different from the previous 3D special effects, this one is completely implemented using HTML5 features instead of superimposing multiple pictures. Another feature of this 3D animation is that it can rotate infinitely, so that the HTML5 Logo can be observed from multiple perspectives.

Online demo Source code download

HTML code

XML/HTML CodeCopy content to clipboard

1. <div class="link-overlay"> 
3. div>
4. <canvas id="canvas" style="background-color:#ddd">< /canvas>

JavaScript code

JavaScript CodeCopy content to clipboard

1. // bind to window onload handler   
2. window.addEventListener('load', onloadHandler, false);   
3.   
4. /** 
5.  * Window onload handler  
6.  */  
7. function onloadHandler()   
8. {   
9.    var canvas = document.getElementById('canvas');   
10.    canvas.width = window.innerWidth;   
11.    canvas.height = window.innerHeight;   
12.    var k3dmain = new K3D.Controller(canvas, true);   
13.   
14.    // generate 3D objects   
15.   
16.    var obj1 = new K3D.K3DObject();   
17.    with (obj1)   
18.    {   
19.       drawmode = "solid";   
20.       shademode = "lightsource";   
21.       sortmode = "unsorted";   
22.       addphi = -0.5;   
23.       abouty = -90;   
24.       perslevel = 1000;   
25.       init(   
26.          [{x:-80,y:180,z:0},{x:0,y:180,z:-80},{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:-50,y:150,z:-30},{x:0,y:150,z:-80},{x:0,y:130,z:-80},{x:-30,y:130,z:-50},{x:-28,y:110,z:-52},{x:0,y:110,z:-80},{x:0,y:90,z:-80},{x:-45,y:90,z:-35},{x:-44,y:80,z:-36},{x:-25,y:80,z:-55},{x:-22,y:66,z:-58},{x:0,y:60,z:-80},{x:0,y:40,z:-80},{x:-40,y:50,z:-40}],   
27.          [],   
28.          [{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[235,235,235],vertices:[4,5,6,7,8,9,10,11,4]},{color:[235,235,235],vertices:[12,13,14,15,16,17,12]}]   
29.       );   
30.    }  
31.    k3dmain.addK3DObject(obj1);   
32.   
33.    var obj2 = new K3D.K3DObject();   
34.    with (obj2)   
35.    {   
36.       drawmode = "solid";   
37.       shademode = "lightsource";   
38.       sortmode = "unsorted";   
39.       addphi = -0.5;   
40.       abouty = -90;   
41.       perslevel = 1000;   
42.       init(   
43.          [{x:0,y:180,z:-80},{x:80,y:180,z:0},{x:80,y:20,z:0},{x:0,y:0,z:-80},{x:0,y:165,z:-80},{x:68,y:165,z:-12},{x:55,y:35,z:-25},{x:0,y:20,z:-80},{x:0,y:150,z:-80},{x:50,y:150,z:-30},{x:47,y:130,z:-33},{x:0,y:130,z:-80},{x:0,y:110,z:-80},{x:45,y:110,z:-35},{x:40,y:50,z:-40},{x:0,y:40,z:-80},{x:0,y:60,z:-80},{x:20,y:66,z:-60},{x:23,y:90,z:-57},{x:0,y:90,z:-80}],   
44.          [],   
45.          [{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[240,101,41],vertices:[4,5,6,7,4]},{color:[235,235,235],vertices:[8,9,10,11,8]},{color:[235,235,235],vertices:[12,13,14,15,16,17,18,19,12]}]   
46.       );   
47.    }   
48.    k3dmain.addK3DObject(obj2);   
49.   
50.    var obj3 = new K3D.K3DObject();   
51.    with (obj3)   
52.    {   
53.       drawmode = "solid";   
54.       shademode = "lightsource";   
55.       sortmode = "unsorted";   
56.       addphi = -0.5;   
57.       abouty = -90;   
58.       perslevel = 1000;   
59.       init(   
60.          [{x:80,y:180,z:0},{x:0,y:180,z:80},{x:0,y:0,z:80},{x:80,y:20,z:0},{x:50,y:150,z:30},{x:0,y:150,z:80},{x:0,y:130,z:80},{x:30,y:130,z:50},{x:28,y:110,z:52},{x:0,y:110,z:80},{x:0,y:90,z:80},{x:45,y:90,z:35},{x:44,y:80,z:36},{x:25,y:80,z:55},{x:22,y:66,z:58},{x:0,y:60,z:80},{x:0,y:40,z:80},{x:40,y:50,z:40}],   
61.          [],   
62.          [{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[235,235,235],vertices:[4,5,6,7,8,9,10,11,4]},{color:[235,235,235],vertices:[12,13,14,15,16,17,12]}]   
63.       );   
64.    }  
65.    k3dmain.addK3DObject(obj3);   
66.   
67.    var obj4 = new K3D.K3DObject();   
68.    with (obj4)   
69.    {   
70.       drawmode = "solid";   
71.       shademode = "lightsource";   
72.       sortmode = "unsorted";   
73.       addphi = -0.5;   
74.       abouty = -90;   
75.       perslevel = 1000;   
76.       init(   
77.          [{x:0,y:180,z:80},{x:-80,y:180,z:0},{x:-80,y:20,z:0},{x:0,y:0,z:80},{x:0,y:165,z:80},{x:-68,y:165,z:12},{x:-55,y:35,z:25},{x:0,y:20,z:80},{x:0,y:150,z:80},{x:-50,y:150,z:30},{x:-47,y:130,z:33},{x:0,y:130,z:80},{x:0,y:110,z:80},{x:-45,y:110,z:35},{x:-40,y:50,z:40},{x:0,y:40,z:80},{x:0,y:60,z:80},{x:-20,y:66,z:60},{x:-23,y:90,z:57},{x:0,y:90,z:80}],   
78.          [],   
79.          [{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[240,101,41],vertices:[4,5,6,7,4]},{color:[235,235,235],vertices:[8,9,10,11,8]},{color:[235,235,235],vertices:[12,13,14,15,16,17,18,19,12]}]   
80.       );   
81.    }   
82.    k3dmain.addK3DObject(obj4);   
83.   
84.    var objBase = new K3D.K3DObject();   
85.    with (objBase)   
86.    {   
87.       drawmode = "solid";   
88.       shademode = "lightsource";   
89.       sortmode = "unsorted";   
90.       addphi = -0.5;   
91.       abouty = -90;   
92.       perslevel = 1000;   
93.       init(   
94.          [{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:0,y:0,z:80},{x:80,y:20,z:0}],   
95.          [],   
96.          [{color:[227,76,38],vertices:[0,2,1,0]},{color:[227,76,38],vertices:[0,3,2,0]}]   
97.       );   
98.    }  
99.    k3dmain.addK3DObject(objBase);   
100.   
101.    var objHtml = new K3D.K3DObject();   
102.    with (objHtml)   
103.    {   
104.       drawmode = "solid";   
105.       shademode = "lightsource";   
106.       //sortmode = "unsorted";   
107.       color = [64,64,64];   
108.       doublesided = true;   
109.       addphi = -0.5;   
110.       abouty = 100;   
111.       scale = 0.75;   
112.       perslevel = 1000;   
113.       init(   
114.          [{x:-80,y:40,z:0},{x:-70,y:40,z:0},{x:-70,y:30,z:0},{x:-60,y:30,z:0},{x:-60,y:40,z:0},{x:-50,y:40,z:0},{x:-50,y:10,z:0},{x:-60,y:10,z:0},{x:-60,y:20,z:0},{x:-70,y:20,z:0},{x:-70,y:10,z:0},{x:-80,y:10,z:0},{x:-40,y:40,z:0},{x:-10,y:40,z:0},{x:-10,y:30,z:0},{x:-20,y:30,z:0},{x:-20,y:10,z:0},{x:-30,y:10,z:0},{x:-30,y:30,z:0},{x:-40,y:30,z:0},{x:0,y:40,z:0},{x:10,y:40,z:0},{x:20,y:30,z:0},{x:30,y:40,z:0},{x:40,y:40,z:0},{x:40,y:10,z:0},{x:30,y:10,z:0},{x:30,y:30,z:0},{x:20,y:20,z:0},{x:10,y:30,z:0},{x:10,y:10,z:0},{x:0,y:10,z:0},{x:50,y:40,z:0},{x:60,y:40,z:0},{x:60,y:20,z:0},{x:80,y:20,z:0},{x:80,y:10,z:0},{x:50,y:10,z:0}],   
115.          [],   
116.          [{vertices:[0,1,2,3,4,5,6,7,8,9,10,11,0]},{vertices:[12,13,14,15,16,17,18,19,12]},{vertices:[20,21,22,23,24,25,26,27,28,29,30,31,20]},{vertices:[32,33,34,35,36,37,32]}]   
117.       );   
118.    }  
119.    k3dmain.addK3DObject(objHtml);   
120.   
121.    // add render loop callback   
122.    var ctx = canvas.getContext('2d');   
123.    var rotationOffset = 0;   
124.    var len = (canvas.height > canvas.width ? canvas.height : canvas.width) * 0.7;   
125.    k3dmain.clearBackground = false;   
126.    k3dmain.callback = function()   
127.    {   
128.       // manually clear bg - as we want to render some extra goodies   
129.       ctx.clearRect(0, 0, canvas.width, canvas.height);   
130.   
131.       // draw bg effect before K3D does its 3D rendering   
132.       ctx.save();   
133.       ctx.translate(canvas.width/2, canvas.height/2);   
134.       ctx.rotate(rotationOffset);   
135.   
136.       // first fill pass - outer rays   
137.       var RAYCOUNT = 24;   
138.       ctx.fillStyle = "#eee";   
139.       ctx.beginPath();   
140.       for (var i=0; i
141.       {   
142.          // rotate context   
143.          ctx.rotate(TWOPI / RAYCOUNT);   
144.          ctx.moveTo(0, 0);   
145.          ctx.lineTo(-20, len);   
146.          ctx.lineTo(20, len);   
147.       }  
148.       ctx.closePath();   
149.       ctx.fill();   
150.       // second fill pass - inner rays   
151.       ctx.fillStyle = "#fff";   
152.       ctx.beginPath();   
153.       for (var i=0; i
154.       {   
155.          // rotate context   
156.          ctx.rotate(TWOPI / RAYCOUNT);   
157.          ctx.moveTo(0, 0);   
158.          ctx.lineTo(-15, len);   
159.          ctx.lineTo(15, len);   
160.       }   
161.       ctx.closePath();   
162.       ctx.fill();   
163.       ctx.restore();   
164.       rotationOffset  = 0.005;   
165.   
166.       // apply user interaction to rotation   
167.       for (var i=0, objs=k3dmain.objects; i
168.       {   
169.          objs[i].ophi  = targetRotationX;   
170.       }   
171.   
172.       if (targetRotationX > -0.5) targetRotationX -= 0.05;   
173.       else if (targetRotationX < -0.55) targetRotationX  = 0.05;   
174.       if (targetRotationX > -0.55 && targetRotationX < -0.5) targetRotationX = -0.5;   
175.    };   
176.   
177.    // start demo loop   
178.    k3dmain.paused = true;   
179.    setInterval(function(){k3dmain.tick()}, 1000/60);   
180. }  
181.   
182. // nifty drag/touch event capture code borrowed from Mr Doob http://mrdoob.com/   
183. var targetRotationX = 0;   
184. var targetRotationOnMouseDownX = 0;   
185. var mouseX = 0;   
186. var mouseXOnMouseDown = 0;   
187. var targetRotationY = 0;   
188. var targetRotationOnMouseDownY = 0;   
189. var mouseY = 0;   
190. var mouseYOnMouseDown = 0;   
191.   
192. var windowHalfX = window.innerWidth / 2;   
193. var windowHalfY = window.innerHeight / 2;   
194.   
195. document.addEventListener('mousedown', onDocumentMouseDown, false);   
196. document.addEventListener('touchstart', onDocumentTouchStart, false);   
197. document.addEventListener('touchmove', onDocumentTouchMove, false);   
198.   
199. function onDocumentMouseDown( event ) {   
200.   
201.  event.preventDefault();   
202.   
203.  document.addEventListener('mousemove', onDocumentMouseMove, false);   
204.  document.addEventListener('mouseup', onDocumentMouseUp, false);   
205.  document.addEventListener('mouseout', onDocumentMouseOut, false);   
206.   
207.  mouseXOnMouseDown = event.clientX - windowHalfX;   
208.  targetRotationOnMouseDownX = targetRotationX;   
209.  mouseYOnMouseDown = event.clientY - windowHalfY;   
210.  targetRotationOnMouseDownY = targetRotationY;   
211. }   
212.   
213. function onDocumentMouseMove( event )   
214. {   
215.  mouseX = event.clientX - windowHalfX;   
216.  targetRotationX = targetRotationOnMouseDownX   (mouseX - mouseXOnMouseDown) * 0.02;   
217.  mouseY = event.clientY - windowHalfY;   
218.  targetRotationY = targetRotationOnMouseDownY   (mouseY - mouseYOnMouseDown) * 0.02;   
219. }  
220.   
221. function onDocumentMouseUp( event )   
222. {   
223.  document.removeEventListener('mousemove', onDocumentMouseMove, false);   
224.  document.removeEventListener('mouseup', onDocumentMouseUp, false);   
225.  document.removeEventListener('mouseout', onDocumentMouseOut, false);   
226. }   
227.   
228. function onDocumentMouseOut( event )   
229. {   
230.  document.removeEventListener('mousemove', onDocumentMouseMove, false);   
231.  document.removeEventListener('mouseup', onDocumentMouseUp, false);   
232.  document.removeEventListener('mouseout', onDocumentMouseOut, false);   
233. }   
234.   
235. function onDocumentTouchStart( event )   
236. {   
237.  if (event.touches.length == 1)   
238.  {   
239.   event.preventDefault();   
240.   
241.   mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;   
242.   targetRotationOnMouseDownX = targetRotationX;   
243.   mouseYOnMouseDown = event.touches[0].pageY - windowHalfY;   
244.   targetRotationOnMouseDownY = targetRotationY;   
245.  }   
246. }   
247.   
248. function onDocumentTouchMove( event )   
249. {   
250.  if (event.touches.length == 1)   
251.  {   
252.   event.preventDefault();   
253.   
254.   mouseX = event.touches[0].pageX - windowHalfX;   
255.   targetRotationX = targetRotationOnMouseDownX   (mouseX - mouseXOnMouseDown) * 0.05;   
256.   mouseY = event.touches[0].pageY - windowHalfY;   
257.   targetRotationY = targetRotationOnMouseDownY   (mouseX - mouseYOnMouseDown) * 0.05;   
258.  }   
259. }   

以上就是本文的全部内容，希望对大家的学习有所帮助。