Kata pengantar
Editor telah menerbitkan tentang bentuk dan bahan geometris sebelumnya. Saya percaya bahwa setelah Anda membaca dan belajar, kami dapat menggunakannya untuk membuat objek. Objek yang paling umum digunakan adalah mesh, yang merupakan objek yang terdiri dari simpul, tepi, wajah, dll.; Objek lain termasuk segmen garis, tulang, sistem partikel, dll. Untuk membuat objek, Anda perlu menentukan bentuk dan bahan geometris. Di antara mereka, bentuk geometris menentukan posisi simpul objek dan informasi lainnya, dan material menentukan warna, tekstur, dan informasi lain dari objek.
1. Buat kisi
Dalam artikel sebelumnya, kami belajar cara membuat bentuk dan bahan geometris, dan menciptakan mesh sangat sederhana, cukup lewati bentuk dan bahan geometris ke dalam konstruktornya. Objek yang paling umum digunakan adalah mesh, yang mewakili geometri yang mengandung titik, garis, dan permukaan. Konstruktornya adalah:
Mesh (geometri, material)
Di sini, mari kita pelajari cara membuat kisi dengan contoh spesifik:
var material = baru tiga.MeshlambertMaTerial ({warna: 0xffff00}); var geometry = baru tiga.cubegeometry (1, 2, 3); var mesh = baru tiga.mesh (geometri, materi); adegan.add (mesh);Jika materi dan geometri tidak digunakan kembali setelah itu, mereka juga dapat ditulis bersama sebagai:
var mesh = baru tiga.mesh (tiga.cubegeometry baru (1, 2, 3), tiga.meshlambertMaterial baru ({warna: 0xffff00})); scene.add (mesh);Setelah menambahkan pencahayaan, hasilnya adalah:
Jika materi tidak ditentukan, bahan dengan wireframe yang sebenarnya akan ditetapkan secara acak setiap kali. Warna setelah menyegarkan halaman berbeda. Salah satu efek yang mungkin adalah:
Kode Sumber:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> 3.js tes 9.1 </itement> </head> <body onload = "init ()"> <canvas id = "MainCanvas"> </canvas> </body> <script type = "text/javascript"> </canvas> </body> <script type = "text/javascript" script "</cann. type = "text/javascript"> function init () {var renderer = new three.webglrenderer ({canvas: document.geteLementById ('mainCanvas')}); renderer.setClearColor (0x0000000); var scene = new three.scene (); // kamera var kamera = tiga.othographycamera baru (-2.5, 2.5, 1.875, -1.875, 0.1, 100); Camera.position.set (5, 5, 20); kamera.lookat (baru tiga.vector3 (0, 0, 0)); scene.add (kamera); var material = new Three.MeshlambertMaterial ({Color: 0xffff00}); // var material = baru tiga.MeshBasicMATERIAL ({// warna: 0xffff00, // wireframe: true //}); var geometry = tiga.cubegeometry baru (1, 2, 3); var mesh = baru tiga.mesh (geometri, material); scene.add (mesh); var light = baru tiga.directionAllight (0xffffff); light.position.set (20, 10, 5); scene.add (ringan); // render renderer.render (adegan, kamera); } </script> </html>2. Ubah Properti
2.1 Ubah materi
Selain menentukan materi dalam konstruktor, bahan juga dapat dimodifikasi setelah jala dibuat:
var material = baru tiga.MeshlambertMaterial ({warna: 0xffff00}); var geometry = baru tiga.cubeGeometry (1, 2, 3); var mesh = baru tiga.mesh (geometri, material); scene.add (mesh); mesh.material = new three.meshlambertmaterial ({color: 0xff0000});Warna terakhir berwarna merah:
Kode Sumber:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> 3.js test9.2 </itement> </head> <body onload = "init ()"> <canvas id = "MainCanvas"> </canvas> </body> <script type = "text/javascript" script "script" script "" script "" script "" type = "text/javascript"> function init () {var renderer = new three.webglrenderer ({canvas: document.geteLementById ('mainCanvas')}); renderer.setClearColor (0x0000000); var scene = new three.scene (); // kamera var kamera = tiga.othographycamera baru (-2.5, 2.5, 1.875, -1.875, 0.1, 100); Camera.position.set (5, 5, 20); kamera.lookat (baru tiga.vector3 (0, 0, 0)); scene.add (kamera); var material = baru tiga.MeshlambertMaterial ({color: 0xffff00}); var geometry = tiga.cubegeometry baru (1, 2, 3); var mesh = baru tiga.mesh (geometri, material); scene.add (mesh); mesh.material = baru tiga.MeshlambertMaTerial ({color: 0xff0000}); var light = baru tiga.directionAllight (0xffffff); light.position.set (20, 10, 5); scene.add (ringan); // render renderer renderer.render (adegan, kamera); } </script> </html>2.2 Posisi, Zoom, Rotasi
Posisi, penskalaan, dan rotasi adalah tiga sifat umum objek. Karena Three.Mesh didasarkan pada Three.Object3D, ini berisi tiga atribut: skala, rotasi, dan posisi. Mereka semua tiga.vector3 instance, jadi metode memodifikasi nilainya adalah sama, di sini mengambil posisi sebagai contoh.
Three.Vector3 memiliki tiga atribut: x, y, dan z. Jika Anda hanya mengatur salah satu atribut, Anda dapat menggunakan metode berikut:
mesh.position.z = 1;
Jika Anda perlu mengatur beberapa properti secara bersamaan, Anda dapat menggunakan dua metode berikut:
mesh.position.set (1.5, -0.5, 0);
atau:
mesh.position = baru tiga.vector3 (1.5, -0.5, 0);
Atribut yang sesuai dari skala penskalaan, dan atribut rotasi yang sesuai adalah rotasi. Metode spesifik sama dengan contoh di atas, yang menunjukkan penskalaan atau rotasi sepanjang tiga sumbu x, y, dan z masing -masing.
Kode Sumber:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> 3.js test9.3 </itement> </head> <body onload = "init ()"> <canvas id = "MainCanvas"> </cannvas> </body> <script type = "text/javascript" script "script" script "script =" JAB "> type = "text/javascript"> function init () {var renderer = new three.webglrenderer ({canvas: document.geteLementById ('mainCanvas')}); renderer.setClearColor (0x0000000); var scene = new three.scene (); // kamera var kamera = tiga.othographycamera baru (-2.5, 2.5, 1.875, -1.875, 0.1, 100); Camera.position.set (5, 5, 20); kamera.lookat (baru tiga.vector3 (0, 0, 0)); scene.add (kamera); var material = baru tiga.MeshlambertMaterial ({color: 0xffff00}); var geometry = tiga.cubegeometry baru (1, 2, 3); var mesh = baru tiga.mesh (geometri, material); scene.add (mesh); mesh.position.set (1.5, -0.5, 0); mesh.position = baru tiga.vector3 (1.5, -0.5, 0); mesh.position.z = 1; var light = baru tiga.directionAllight (0xffffff); light.position.set (20, 10, 5); scene.add (ringan); Drawaxes (adegan); // render renderer.render (adegan, kamera); } function drawaxes (scene) {// x-axis var xgeo = baru tiga.geometry (); xgeo.vertices.push (baru tiga.vector3 (0, 0, 0)); xgeo.vertices.push (baru tiga.vector3 (1, 0, 0)); var xmat = new three.lineBasicMaerial ({color: 0xff0000}); var xaxis = baru tiga.line (xgeo, xmat); scene.add (xaxis); // y-axis var ygeo = baru tiga.geometry (); ygeo.vertices.push (baru tiga.vector3 (0, 0, 0)); ygeo.vertices.push (baru tiga.vector3 (0, 1, 0)); var ymat = new three.lineBasicMaerial ({color: 0x00ff00}); var yaxis = tiga.line baru (ygeo, ymat); scene.add (yaxis); // z-axis var zgeo = baru tiga.geometry (); zgeo.vertices.push (baru tiga.vector3 (0, 0, 0)); Zgeo.Vertices.push (baru tiga.vector3 (0, 0, 1)); var zmat = new three.lineBasicMaerial ({color: 0x00ccff}); var zaxis = baru tiga.line (zgeo, zmat); scene.add (zaxis); } </script> </html>Isi artikel ini berakhir di sini. Artikel ini memperkenalkan kisi dalam tiga.js melalui contoh dan gambar terperinci. Saya harap artikel ini akan membantu semua orang untuk belajar Three.js.