Kemahiran tutorial HTML5 Logo animation_html5 boleh putar 3D berbilang perspektif-Tutorial H5-php.cn

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

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

Kod JavaScript

Kod JavaScriptSalin kandungan ke papan keratan

// ikat pada pengendali beban tetingkap
window.addEventListener('load', onloadHandler, false);
/**
* Pengendali beban tetingkap
*/
fungsi onloadHandler()
{
var kanvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var k3dmain = baharu K3D.Controller(kanvas, true );
// menjana objek 3D
var obj1 = baharu K3D.K3DObject();
dengan (obj1)
{
drawmode = "pepejal";
mod teduh = "sumber cahaya";
mod isihan = "tidak diisih";
addphi = -0.5;
kira-kira = -90;
perlevel = 1000;
init(
[{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}],
[],
[{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]}]
);
}
k3dmain.addK3DObject(obj1);
var obj2 = baharu K3D.K3DObject();
dengan (obj2)
{
drawmode = "pepejal";
mod teduh = "sumber cahaya";
mod isihan = "tidak diisih";
addphi = -0.5;
kira-kira = -90;
perlevel = 1000;
init(
[{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}],
[],
[{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]}]
);
}
k3dmain.addK3DObject(obj2);
var obj3 = baharu K3D.K3DObject();
dengan (obj3)
{
drawmode = "pepejal";
mod teduh = "sumber cahaya";
mod isihan = "tidak diisih";
addphi = -0.5;
kira-kira = -90;
perlevel = 1000;
init(
[{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}],
[],
[{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]}]
);
}
k3dmain.addK3DObject(obj3);
var obj4 = baharu K3D.K3DObject();
dengan (obj4)
{
drawmode = "pepejal";
mod teduh = "sumber cahaya";
mod isihan = "tidak diisih";
addphi = -0.5;
kira-kira = -90;
perlevel = 1000;
init(
[{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}],
[],
[{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]}]
);
}
k3dmain.addK3DObject(obj4);
var objBase = baharu K3D.K3DObject();
dengan (objBase)
{
drawmode = "pepejal";
mod teduh = "sumber cahaya";
mod isihan = "tidak diisih";
addphi = -0.5;
kira-kira = -90;
perlevel = 1000;
init(
[{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:0,y:0,z:80} ,{x:80,y:20,z:0}],
[],
[{warna:[227,76,38],bucu:[0,2,1,0]},{warna:[227,76,38],bucu:[0,3,2 ,0]}]
);
}
k3dmain.addK3DObject(objBase);
var objHtml = baharu K3D.K3DObject();
dengan (objHtml)
{
drawmode = "pepejal";
mod teduh = "sumber cahaya";
//sortmode = "unsorted";
warna = [64,64,64];
berdua = benar;
addphi = -0.5;
kira-kira = 100;
skala = 0.75;
perlevel = 1000;
init(
[{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}],
[],
[{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]}]
);
}
k3dmain.addK3DObject(objHtml);
// tambah memaparkan gelung panggilan balik
var ctx = canvas.getContext('2d');
var putaranOffset = 0;
var len = (canvas.height > canvas.width ? canvas.height : canvas.width) * 0.7;
k3dmain.clearBackground = palsu;
k3dmain.callback = fungsi()
{
// secara manual kosongkan bg - kerana kami ingin memberikan beberapa barang tambahan
ctx.clearRect(0, 0, canvas.width, canvas.height);
// lukiskan bg kesan sebelum K3D melakukan perenderan 3D nya
ctx.save();
ctx.translate(canvas.width/2, canvas.height/2);
ctx.rotate(rotationOffset);
// pertama isi pas - sinar luar
var RAYCOUNT = 24;
ctx.fillStyle = "#eee";
ctx.beginPath();
untuk (var i=0; i
{
// putar konteks
ctx.rotate(TWOPI / RAYCOUNT);
ctx.moveTo(0, 0);
ctx.lineTo(-20, len);
ctx.lineTo(20, len);
}
ctx.closePath();
ctx.fill();
// laluan isi kedua - sinar dalaman
ctx.fillStyle = "#fff";
ctx.beginPath();
untuk (var i=0; i
{
// putar konteks
ctx.rotate(TWOPI / RAYCOUNT);
ctx.moveTo(0, 0);
ctx.lineTo(-15, len);
ctx.lineTo(15, len);
}
ctx.closePath();
ctx.fill();
ctx.restore();
putaranOffset = 0.005;
// gunakan interaksi pengguna pada putaran
untuk (var i=0, objs=k3dmain.objects; i
{
objs[i].ophi = targetRotationX;
}
jika (targetRotationX > -0.5) targetRotationX -= 0.05;
lain jika (targetRotationX < -0.55) targetRotationX = 0.05;
jika (targetRotationX > -0.55 && targetRotationX < -0.5) targetRotationX = -0.5;
};
// mulakan demo gelung
k3dmain.pased = benar;
setInterval(fungsi(){k3dmain.tick()}, 1000/60);
}
// nifty drag/touch acara tangkap kod dipinjam dari En Doob http://mrdoob.com/
var targetRotationX = 0;
var targetRotationOnMouseDownX = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var targetRotationY = 0;
var targetRotationOnMouseDownY = 0;
var tetikus = 0;
var mouseYOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
fungsi onDocumentMouseDown( event ) {
event.preventDefault();
document.addEventListener('mouseemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDownX = targetRotationX;
mouseYOnMouseDown = event.clientY - windowHalfY;
targetRotationOnMouseDownY = targetRotationY;
}
fungsi onDocumentMouseMove( event )
{
mouseX = event.clientX - windowHalfX;
targetRotationX = targetRotationOnMouseDownX (mouseX - mouseXOnMouseDown) * 0.02;
mouseY = event.clientY - windowHalfY;
targetRotationY = targetRotationOnMouseDownY (mouseY - mouseYOnMouseDown) * 0.02;
}
Funktion onDocumentMouseUp( event )
{
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
Funktion onDocumentMouseOut( event )
{
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
Funktion onDocumentTouchStart( event )
{
if (event.touches.length == 1)
{
event.preventDefault();
mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
targetRotationOnMouseDownX = targetRotationX;
mouseYOnMouseDown = event.touches[0].pageY - windowHalfY;
targetRotationOnMouseDownY = targetRotationY;
}
}
Funktion onDocumentTouchMove( event )
{
if (event.touches.length == 1)
{
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
targetRotationX = targetRotationOnMouseDownX (mouseX - mouseXOnMouseDown) * 0,05;
mouseY = event.touches[0].pageY - windowHalfY;
targetRotationY = targetRotationOnMouseDownY (mouseX - mouseYOnMouseDown) * 0,05;
}
}

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