Animasi roaming ruang komputer virtual 3D klasik WebGL berdasarkan HTML5

Penggunaan orang pertama dalam 3D mengacu pada penggunaan orang pertama dalam game menembak. First-person shooters (FPS) adalah jenis video game berdasarkan sudut pandang orang pertama yang berpusat pada senjata dan senjata lainnya; pemain melewati Rasakan aksi melalui mata protagonis. Sejak dimulainya genre ini, grafik 3D dan pseudo-3D yang canggih telah menantang pengembangan perangkat keras, dan permainan multipemain menjadi sangat diperlukan.

Tangkapan layar dari Doom, salah satu game terobosan dalam genre ini, memamerkan perspektif tipikal penembak orang pertama

Saat ini museum atau perusahaan sering menggunakan animasi 3D untuk membuat video promosi, dll. Keuntungan terbesar dari interpretasi animasi 3D adalah memberikan perasaan nyata kepada orang-orang baik dari segi isi dan bentuknya. Ini lebih intuitif daripada karya grafis dan lebih realistis daripada animasi 2D, sehingga dapat memberikan perasaan seperti berada di lingkungan periklanan kepada pemirsa, sehingga sangat meningkatkan persuasif iklan. Perkembangan teknologi 3D bahkan menantang kemampuan penonton dalam membedakan sehingga menyebabkan penilaian penonton melayang antara virtual dan realita.

Selain itu, penerapan efek khusus 3D memberikan ruang berpikir yang lebih luas untuk kreativitas, menjadi jaminan yang dapat diandalkan untuk eksekusi kreatif, dan memperkaya bentuk dan gaya kreativitas. Sesuai dengan daya tarik kinerja tema iklan, suasana seperti mimpi dan magis dapat diciptakan untuk merangsang dan mengesankan penonton, sehingga mencapai tujuan komunikasi dengan penonton.

Video promosi animasi 3D menggabungkan animasi 3D, pengambilan efek khusus, video perusahaan, foto, prospek masa depan, dan konten lainnya melalui sintesis pasca produksi, sulih suara, dan narasi untuk membentuk video iklan perusahaan bermutu tinggi yang intuitif, jelas, dan populer, memungkinkan orang-orang dari berbagai lapisan masyarakat untuk Menciptakan kesan positif, positif, dan baik terhadap perusahaan, sehingga terjalin niat baik dan kepercayaan terhadap perusahaan, serta mempercayai produk atau jasa perusahaan.

Pesatnya perkembangan 3D saat ini adalah berkat pencarian manusia terhadap realitas, jadi belajar menggunakan 3D dengan baik adalah bagian yang tak terpisahkan dari kesuksesan di masa depan.

Ide dari contoh dalam artikel ini adalah mengunjungi ruang komputer. Tindakan membuka pintu sangat dinamis, ditambah dengan putaran yang sesuai, pada dasarnya mensimulasikan sepenuhnya efek orang yang mengunjungi ruang komputer. Kelebihan lainnya adalah jika Anda ingin mendemonstrasikannya kepada atasan Anda tanpa harus mengoperasikannya, atasan Anda akan sangat puas dengan efek keren ini!

http://www.hightopo.com/demo/room-walkthrough/index.html

Tombol reset dan start pada antarmuka adalah tombol yang ditambahkan langsung ke badan, dan peristiwa klik ditambahkan ke dua tombol berikut:

 <div></div><div></div>

Seluruh adegan dibuat dari komponen 3D yang dienkapsulasi HT. Membangun adegan sebesar itu memerlukan sejumlah kode tertentu. Untuk menyederhanakan, saya mengambil adegan secara terpisah dan menggunakan kelas ht.JSONSerializer yang dienkapsulasi HT untuk membuat adegan bersambung menjadi json. Hanya file json yang dihasilkan yang dimasukkan ke dalam kode. Agar lebih jelas, saya akan memberikan contoh di sini, dengan asumsi adegan 3D telah dibuat:

 dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);//....Buat adegan dm.serialize();//Anda dapat mengisi parameter angka sebagai singkatan spasi Nilai ditambahkan

Sekarang kita telah menyiapkan lingkungan dan mengubahnya menjadi file json, sulit untuk mengontrol kodenya. Dalam hal ini, kita akan melakukan deserialisasi model data DataModel. Fungsi dari fungsi ini adalah untuk mengubah format json menjadi objek dan melakukan deserialisasi. Objek diteruskan ke model data DataModel. Untuk detailnya, lihat manual serialisasi HT untuk Web:

 var g3d = window.g3d = ht.graph3d.Graph3dView() baru, dataModel = g3d.dm(), view = g3d.getView(), path = null;g3d.setMovableFunc(function(data) { return false;}) ;g3d.setVisibleFunc(fungsi(data) { if (data.getName() === jalur) { return false; } return true;});g3d.setEye([523, 5600, 8165]);g3d.setFar(60000);dataModel.deserialize(json);

Saat ini kita perlu mengoperasikan pintu di lokasi kejadian dan rute yang akan kita ambil, melintasi model data DataModel, dan mendapatkan dua data berikut:

 for (var i = 0; i < dataModel.size(); i++) { var data = dataModel.getDatas().get(i); Nama window.door = data; } if (data.getName() === path) { path = data; } if (window.door && path) {//Dapatkan pintu dan jalur Setelah data, keluar dari loop; }}

Sederhananya, hanya ada empat tindakan dalam contoh ini, reset ke titik semula, memulai tindakan, bergerak maju, dan berhenti. Klik tombol start. Pada aksi awal, kita hanya melakukan satu aksi, yaitu aksi membuka pintu. Setelah aksi selesai, kita memanggil fungsi maju untuk bergerak maju:

 function startAnim() { if (window.isAnimationRunning) { return; } reset(); window.isAnimationRunning = true;//Apakah animasi sedang berlangsung ht.Default.startAnim({ frame: 30, //Jumlah animasi frame, digunakan secara default `ht.Default.animFrames`．interval: 20, //Interval frame animasi menggunakan `ht.Default.animInterval` secara default. function() {// Fungsi yang dipanggil setelah animasi berakhir. forward() }, action: function(t){ // Fungsi tindakan harus disediakan untuk mengimplementasikan perubahan atribut selama animasi door.setRotationY(-120 *Matematika./180*t);

Fungsi reset disini adalah fungsi untuk mengembalikan ke titik semula, fungsi ini kita gunakan untuk mengembalikan semua perubahan ke posisi awal, termasuk posisi pintu:

 fungsi reset() { if (window.isAnimationRunning) { kembali; } g3d.setCenter([0,0,0]); g3d.setEye([523, 5600, 8165]); (0);}

Untuk berpindah pasti membutuhkan jalur berjalan, yaitu jalur yang baru saja kita peroleh. Dapatkan semua elemen di jalur melalui window.points = path.getPoints()._as; dan inisialisasi window.forwardIndex = 0; belakang jalan. Atur Mata dan Pusat dalam adegan 3D di dua titik, sehingga menciptakan efek bahwa kita adalah orang pertama:

 var point1 = poin[forwardIndex], point2 = poin[forwardIndex + 1];var distanceX = (point2.x - point1.x), distanceY = (point2.y - point1.y), distance = Math.sqrt(distanceX * jarakX + jarakY * distanceY)-200;//Jarak antara dua titik dihitung melalui teorema segitiga Pythagoras. Saya takut menabrak tembok, jadi -200g3d.setEye([point1.x, 1600, point1.y]);//Eye g3d.setCenter([titik2 .x, 1600, titik2.y]);//I

Komponen 3D di HT memiliki metode walk(step, anim, firstPersonMode) . Fungsi ini mengubah posisi mata dan pusat secara bersamaan. Artinya, mata dan pusat menggerakkan offset yang sama dalam arah vektor yang ditentukan oleh dua titik secara bersamaan. langkah adalah nilai panjang vektor offset. Ketika parameter firstPersonMode kosong, nilai Graph3dView#isFirstPersonMode() saat ini digunakan secara default. Jika operasi walk dipanggil untuk mode orang pertama, fungsi ini akan mempertimbangkan batasan batas Graph3dView#getBoundaries().

 g3d.walk(distance, { frame: 50, interval: 30, easing: function(t) {return t; }, finishFunc: function() { forwardIndex += 1; if (points.length - 2 > forwardIndex) {/ /points.length = 5 g3d.setCenter([point2.x, 1600, point2.y]);//Ubah titik akhir ke titik awal g3d.rotate(Math.PI / 2, 0, { frame: 30, interval: 30, easing: function(t) {return t;}, finishFunc : function() { forward();} } } else { var lastPoint = poin[points.length - 1];//titik jalur di json Poin terakhir g3d.setCenter([lastPoint.x, 1400, lastPoint.y]); g3d.rotate(-Math.PI / 2, 0, { frame: 30, interval: 30, finishFunc: function() { window . isAnimationRunning = salah; } });

Tidak peduli berapa banyak titik yang ada di jalur, pernyataan penilaian ini masih dapat berfungsi. Hanya poin terakhir adalah keluar dari fungsi yang dipanggil setelah animasi finishFunc berakhir, dan atur nilai window.isAnimationRunning ke false untuk menghentikan fungsi startAnim . Jika ini bukan poin terakhir, setelah pengguna memutar, fungsi maju dipanggil kembali. Pada titik ini, semua kode telah dijelaskan. Proyek sebesar itu telah diselesaikan dalam jumlah kode yang sangat singkat!

Di atas adalah animasi roaming ruang komputer virtual 3D klasik WebGL berdasarkan HTML5 yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!