Kemahiran tutorial HTML5 Logo animation_html5 boleh putar 3D berbilang perspektif

Ini ialah kesan khas animasi 3D berdasarkan HTML5 dan CSS3 Berbeza daripada kesan khas 3D sebelumnya, yang ini dilaksanakan sepenuhnya menggunakan ciri HTML5 dan bukannya menindih berbilang gambar. Satu lagi ciri animasi 3D ini ialah ia boleh berputar tanpa had, supaya Logo HTML5 boleh diperhatikan dari pelbagai perspektif.

Demo dalam talian Muat turun kod sumber

Kod HTML

Kod XML/HTMLSalin kandungan ke papan keratan

1. <div kelas="tindanan pautan"> 
3. div>
4. <kanvas id="kanvas" gaya="warna latar belakang:#ddd">< /kanvas>

Kod JavaScript

Kod JavaScriptSalin kandungan ke papan keratan

1. // ikat pada pengendali beban tetingkap   
2. window.addEventListener('load', onloadHandler, false);   
3.   
4. /** 
5.  * Pengendali beban tetingkap  
6.  */  
7. fungsi onloadHandler()   
8. {   
9.    var kanvas = document.getElementById('canvas');   
10.    canvas.width = window.innerWidth;   
11.    canvas.height = window.innerHeight;   
12.    var k3dmain = baharu K3D.Controller(kanvas, true );   
13.   
14.    // menjana objek 3D   
15.   
16.    var obj1 = baharu K3D.K3DObject();   
17.    dengan (obj1)   
18.    {   
19.       drawmode = "pepejal";   
20.       mod teduh = "sumber cahaya";   
21.       mod isihan = "tidak diisih";   
22.       addphi = -0.5;   
23.       kira-kira = -90;   
24.       perlevel = 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.          [{warna:[227,76,38],bucu:[0,1,2,3,0]},{warna:[235,235,235],bucu:[4,5,6,7 ,8,9,10,11,4]},{warna:[235,235,235],bucu:[12,13,14,15,16,17,12]}]   
29.       );   
30.    }  
31.    k3dmain.addK3DObject(obj1);   
32.   
33.    var obj2 = baharu K3D.K3DObject();   
34.    dengan (obj2)   
35.    {   
36.       drawmode = "pepejal";   
37.       mod teduh = "sumber cahaya";   
38.       mod isihan = "tidak diisih";   
39.       addphi = -0.5;   
40.       kira-kira = -90;   
41.       perlevel = 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.          [{warna:[227,76,38],bucu:[0,1,2,3,0]},{warna:[240,101,41],bucu:[4,5,6 ,7,4]},{warna:[235,235,235],bucu:[8,9,10,11,8]},{warna:[235,235,235],bucu:[12,13,14,15,16,17 ,18,19,12]}]   
46.       );   
47.    }   
48.    k3dmain.addK3DObject(obj2);   
49.   
50.    var obj3 = baharu K3D.K3DObject();   
51.    dengan (obj3)   
52.    {   
53.       drawmode = "pepejal";   
54.       mod teduh = "sumber cahaya";   
55.       mod isihan = "tidak diisih";   
56.       addphi = -0.5;   
57.       kira-kira = -90;   
58.       perlevel = 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.          [{warna:[227,76,38],bucu:[0,1,2,3,0]},{warna:[235,235,235],bucu:[4,5,6,7 ,8,9,10,11,4]},{warna:[235,235,235],bucu:[12,13,14,15,16,17,12]}]   
63.       );   
64.    }  
65.    k3dmain.addK3DObject(obj3);   
66.   
67.    var obj4 = baharu K3D.K3DObject();   
68.    dengan (obj4)   
69.    {   
70.       drawmode = "pepejal";   
71.       mod teduh = "sumber cahaya";   
72.       mod isihan = "tidak diisih";   
73.       addphi = -0.5;   
74.       kira-kira = -90;   
75.       perlevel = 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.          [{warna:[227,76,38],bucu:[0,1,2,3,0]},{warna:[240,101,41],bucu:[4,5,6 ,7,4]},{warna:[235,235,235],bucu:[8,9,10,11,8]},{warna:[235,235,235],bucu:[12,13,14,15,16,17 ,18,19,12]}]   
80.       );   
81.    }   
82.    k3dmain.addK3DObject(obj4);   
83.   
84.    var objBase = baharu K3D.K3DObject();   
85.    dengan (objBase)   
86.    {   
87.       drawmode = "pepejal";   
88.       mod teduh = "sumber cahaya";   
89.       mod isihan = "tidak diisih";   
90.       addphi = -0.5;   
91.       kira-kira = -90;   
92.       perlevel = 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.          [{warna:[227,76,38],bucu:[0,2,1,0]},{warna:[227,76,38],bucu:[0,3,2 ,0]}]   
97.       );   
98.    }  
99.    k3dmain.addK3DObject(objBase);   
100.   
101.    var objHtml = baharu K3D.K3DObject();   
102.    dengan (objHtml)   
103.    {   
104.       drawmode = "pepejal";   
105.       mod teduh = "sumber cahaya";   
106.       //sortmode = "unsorted";   
107.       warna = [64,64,64];   
108.       berdua = benar;   
109.       addphi = -0.5;   
110.       kira-kira = 100;   
111.       skala = 0.75;   
112.       perlevel = 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.    // tambah memaparkan gelung panggilan balik   
122.    var ctx = canvas.getContext('2d');   
123.    var putaranOffset = 0;   
124.    var len = (canvas.height > canvas.width ? canvas.height : canvas.width) * 0.7;   
125.    k3dmain.clearBackground = palsu;   
126.    k3dmain.callback = fungsi()   
127.    {   
128.       // secara manual kosongkan bg - kerana kami ingin  memberikan beberapa barang tambahan   
129.       ctx.clearRect(0, 0, canvas.width, canvas.height);   
130.   
131.       // lukiskan bg kesan sebelum K3D melakukan perenderan 3D nya   
132.       ctx.save();   
133.       ctx.translate(canvas.width/2, canvas.height/2);   
134.       ctx.rotate(rotationOffset);   
135.   
136.       // pertama isi pas - sinar luar   
137.       var RAYCOUNT = 24;   
138.       ctx.fillStyle = "#eee";   
139.       ctx.beginPath();   
140.       untuk (var i=0; i
141.       {   
142.          // putar konteks   
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.       // laluan isi kedua - sinar dalaman   
151.       ctx.fillStyle = "#fff";   
152.       ctx.beginPath();   
153.       untuk (var i=0; i
154.       {   
155.          // putar konteks   
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.       putaranOffset  = 0.005;   
165.   
166.       // gunakan interaksi pengguna pada putaran   
167.       untuk (var i=0, objs=k3dmain.objects; i
168.       {   
169.          objs[i].ophi  = targetRotationX;   
170.       }   
171.   
172.       jika (targetRotationX > -0.5) targetRotationX -= 0.05;   
173.       lain jika (targetRotationX < -0.55) targetRotationX  = 0.05;   
174.       jika (targetRotationX > -0.55 && targetRotationX < -0.5) targetRotationX = -0.5;   
175.    };   
176.   
177.    // mulakan demo gelung   
178.    k3dmain.pased = benar;   
179.    setInterval(fungsi(){k3dmain.tick()}, 1000/60);   
180. }  
181.   
182. // nifty drag/touch acara tangkap kod dipinjam dari En 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 tetikus = 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. fungsi onDocumentMouseDown( event ) {   
200.   
201.  event.preventDefault();   
202.   
203.  document.addEventListener('mouseemove', 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. fungsi 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. Funktion onDocumentMouseUp( event )   
222. {   
223.  document.removeEventListener('mousemove', onDocumentMouseMove, false);   
224.  document.removeEventListener('mouseup', onDocumentMouseUp, false);   
225.  document.removeEventListener('mouseout', onDocumentMouseOut, false);   
226. }   
227.   
228. Funktion onDocumentMouseOut( event )   
229. {   
230.  document.removeEventListener('mousemove', onDocumentMouseMove, false);   
231.  document.removeEventListener('mouseup', onDocumentMouseUp, false);   
232.  document.removeEventListener('mouseout', onDocumentMouseOut, false);   
233. }   
234.   
235. Funktion 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. Funktion 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. }   

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