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

Rumah

hujung hadapan web

Tutorial H5

Kemahiran tutorial HTML5 Logo animation_html5 boleh putar 3D berbilang perspektif

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

putaran 3d html5 logo

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;
}
}

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

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7480

Tutorial CakePHP

1377

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles