Kata pengantar
Materi adalah properti yang terkait dengan efek rendering terlepas dari informasi verteks objek. Dengan mengatur materi, Anda dapat mengubah warna, peta tekstur, mode pencahayaan, dll. Dari objek.
MeshbasicMaterial: Tidak ada rasa cahaya, memberikan geometri warna sederhana atau tampilan gambar.
MeshlambertMaterial: Bahan ini responsif terhadap cahaya dan digunakan untuk membuat benda redup dan non-bercahaya.
MeshphongMaterial: Bahan ini juga bereaksi terhadap cahaya dan digunakan untuk membuat benda logam yang cerah.
1. Bahan Dasar
Gunakan objek material dasar, warna objek setelah rendering selalu warna material tanpa efek terang dan gelap atau bayangan karena pencahayaan. Jika tidak ada warna untuk bahan yang ditentukan, warnanya acak. Konstruktornya adalah:
Three.Meshlambertmaterial (Opt)
Di antara mereka, OPT dapat default atau merupakan nilai yang berisi setiap atribut. Misalnya, buat bahan kuning baru dengan opacity 0,75:
Tiga.MeshBasicMATerial baru ({Color: 0xffff00, Opacity: 0.75});Terapkan ke kubus (lihat "Tiga.js Learning Geometry", efeknya adalah:
Kode Sumber:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> 3.js tes 7.1 </title> </head> <body onload = "init ()"> <canvas id = "MainCanvas"> </canvas> </body> <script type = "text/javascript" script "script" script = "JAB" </CANPAS/THREPMAS = "THREPT/THREPT/THREPT/THREPT/THRIP/THREPT/THRIP/THRIP/THRIP/THRIP/THREP/THREPT/THREPT/THREPT/THREPT/THREPT/THREP/THREP/JABA. 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 (-5, 5, 3.75, -3.75, 0.1, 100); kamera.position.set (25, 25, 25); kamera.lookat (baru tiga.vector3 (0, 0, 0)); scene.add (kamera); // cahaya var light = new three.pointlight (0xffffff, 1, 100); light.position.set (10, 15, 5); scene.add (ringan); var material = new Three.MeshBasicMaterial ({Color: 0xffff00, Opacity: 0.75}); var cube = baru tiga.mesh (tiga.cubegeometry baru (5, 5, 5), material); scene.add (kubus); renderer.render (adegan, kamera); } </script> </html>Beberapa sifat dasar yang lebih umum digunakan:
・ Terlihat: apakah itu terlihat, default itu benar
・ Sisi: render bagian depan atau belakang wajah, standarnya adalah tiga.frontside depan, yang dapat diatur ke belakang tiga.backside, atau tiga sisi.
・ Wireframe: apakah akan membuat garis, bukan wajah, default ke false
・ Warna: Hexadecimal RGB Color, jika merah direpresentasikan sebagai 0xff0000
・ Peta: Gunakan peta tekstur
Untuk bahan dasar, bahkan jika sumber cahaya dalam adegan diubah, objek menggunakan bahan itu selalu memiliki efek yang sama dalam warna di mana -mana. Tentu saja, ini tidak terlalu realistis, jadi kami akan memperkenalkan model pencahayaan yang lebih realistis: model pencahayaan Lambert dan model pencahayaan phong .
2. Bahan Lamber dan Bahan Phong
Bahan Lambert (MeshlambertMaterial) adalah bahan yang sesuai dengan model pencahayaan Lambert. Fitur utama dari model pencahayaan Lambert adalah bahwa ia hanya mempertimbangkan refleksi difus tetapi tidak mempertimbangkan efek refleksi specular. Oleh karena itu, tidak cocok untuk objek seperti logam dan cermin yang membutuhkan refleksi specular, dan cocok untuk efek refleksi difus dari sebagian besar objek lainnya.
Formula model pencahayaan adalah:
Idiffuse = kd * id * cos (theta)
Di antara mereka, idiffuse adalah intensitas cahaya yang tersebar, KD adalah atribut refleksi difus dari permukaan objek, ID adalah intensitas cahaya, dan theta adalah busur sudut cahaya dari cahaya.
Tentu saja, untuk materi Lambert menggunakan Three.js, Anda tidak perlu memahami formula di atas untuk menggunakannya secara langsung.
Metode untuk membuat bahan Lambert kuning adalah:
Three.MeshlambertMaterial baru ({Color: 0xffff00})Setelah menggunakan pencahayaan, Anda mendapatkan efek berikut:
Warna digunakan untuk mengekspresikan kemampuan material untuk memantulkan cahaya yang tersebar, dan juga merupakan atribut yang paling umum digunakan untuk mengatur warna material. Selain itu, Anda juga dapat menggunakan ambient dan emisif untuk mengontrol warna material.
Ambient mewakili kemampuan refleksi untuk cahaya sekitar. Nilai ini hanya valid ketika ambientlight diatur. Kemampuan refleksi material untuk cahaya sekitar dikalikan dengan intensitas cahaya sekitar untuk mendapatkan warna material yang sebenarnya.
Emisif adalah warna yang bercahaya sendiri dari bahan, yang dapat digunakan untuk mengekspresikan warna sumber cahaya. Ini bukan sumber cahaya, tetapi warna yang tidak terpengaruh oleh cahaya. Luminescence sendiri di merah saja:
Three.MeshlambertMaterial baru ({emitsive: 0xff0000})Efeknya adalah:
Jika menggunakan cahaya luminescent merah dan kuning yang tersebar kuning:
Three.MeshlambertMaterial baru ({Color: 0xffff00, Emitive: 0xff0000})Efeknya adalah:
Efek dari bola:
Merangkum sifat unik bahan lamber:
Ambient: Atur warna ambient material dan gunakan dengan sumber cahaya ambient. Warna ini akan dikalikan dengan warna cahaya sekitar. Yaitu, bereaksi terhadap sumber cahaya.
Emisif: Atur warna yang dipancarkan oleh material, bukan sumber cahaya, tetapi warna yang tidak terpengaruh oleh cahaya. Default berwarna hitam.
Kode Sumber:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> 3.js test7.2 </itement> </head> <body onload = "init ()"> <canvas id = "MainCanvas"> </canvas> </body> <script type = "text/javascript"> </canvas> </body> <script type = "text/javascript"> </cann.me. 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 (-5, 5, 3.75, -3.75, 0.1, 100); kamera.position.set (25, 25, 25); kamera.lookat (baru tiga.vector3 (0, 0, 0)); scene.add (kamera); // cahaya var light = new three.pointlight (0xffffff, 1, 100); light.position.set (10, 15, 5); scene.add (ringan); var material = new Three.MeshlambertMaterial ({Color: 0xffff00, Emitive: 0xff0000}); var cube = baru tiga.mesh (tiga.cubegeometry baru (5, 5, 5), material); scene.add (cube); // var sphere = new three.mesh (baru tiga.spheregeometry (3, 20, 8), material); // scene.add (sphere); renderer.render (adegan, kamera); } </script> </html>3. Bahan fong
Bahan phong (meshphongmaterial) adalah bahan yang sesuai dengan model pencahayaan phong. Tidak seperti Lambert, model Phong mempertimbangkan efek refleksi specular, sehingga sangat cocok untuk kinerja logam dan cermin.
Bagian refleksi difus dan model pencahayaan Lambert adalah sama, dan model bagian refleksi specular adalah:
Ispecular = Ks * Is * (cos(alpha)) ^ n
Di antara mereka, ispecular adalah intensitas cahaya yang dipantulkan oleh permukaan specular, KS adalah koefisien refleksi specular dari permukaan material, adalah intensitas sumber cahaya, alpha adalah sudut antara cahaya yang dipantulkan dan garis pandang, N adalah indeks highlight, dan semakin besar tempat sorotan, semakin kecil tempat highlight.
Karena bagian refleksi difus konsisten dengan model Lambert, jika koefisien refleksi specular tidak ditentukan, tetapi hanya refleksi difus yang ditetapkan, efeknya sama dengan Lambert:
Tiga.MeshphongMaTerial baru ({Color: 0xffff00});Demikian pula, baik nilai emisif dan ambien dapat ditentukan, dan tidak akan dijelaskan di sini. Koefisien refleksi specular ditentukan di bawah ini. Pertama, kami hanya menggunakan refleksi specular, mengatur highlight ke merah, dan menerapkannya pada bola:
var material = new three.meshphongmaterial ({specular: 0xff0000}); var sphere = baru tiga.mesh (tiga.spheregegeometry baru (3, 20, 8), material);Efeknya adalah:
Nilai-N dalam model pencahayaan dapat dikontrol melalui atribut shininess. Ketika nilai shininess lebih besar, semakin kecil tempat highlight, dan nilai defaultnya adalah 30. Ketika kita mengaturnya ke 1000:
Tiga.MeshphongMaTerial baru ({specular: 0xff0000, Shininess: 1000});Efeknya adalah:
Gunakan cahaya cermin kuning, cahaya yang tersebar merah:
material = new Three.MeshphongMaterial ({Color: 0xff0000, Specular: 0xffff00, Shininess: 100});Merangkum sifat unik dari bahan phong:
Ambient: Atur warna ambient material dan gunakan dengan sumber cahaya ambient. Warna ini akan dikalikan dengan warna cahaya sekitar. Yaitu, bereaksi terhadap sumber cahaya.
Emisif: Atur warna yang dipancarkan oleh material, bukan sumber cahaya, tetapi warna yang tidak terpengaruh oleh cahaya. Default berwarna hitam
Specular: Menentukan kecerahan bahan dan warna highlight. Jika diatur ke warna yang sama dengan properti warna, bahan lain yang lebih mirip logam akan diperoleh. Jika diatur ke abu -abu abu -abu, itu akan terlihat seperti plastik.
Shininess: Menentukan kecerahan bagian highlight, nilai defaultnya adalah 30.
Kode Sumber:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> 3.js test7.3 </title> </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 (-5, 5, 3.75, -3.75, 0.1, 100); kamera.position.set (25, 25, 25); kamera.lookat (baru tiga.vector3 (0, 0, 0)); scene.add (kamera); // cahaya var light = baru tiga.pointlight (0xffffff, 1, 200); light.position.set (10, 15, 25); scene.add (ringan); var material = new three.meshphongmaterial ({// specular: 0xff0000, warna: 0xff0000, specular: 0xffff00, shininess: 100}); // var cube = baru tiga.mesh (tiga.cubegeometry baru (5, 5, 5), material); // scene.add (cube); var sphere = baru tiga. scene.add (sphere); renderer.render (adegan, kamera); } </script> </html>Meringkaskan
Isi artikel ini berakhir di sini. Artikel ini memperkenalkan Lamber dan Phong di Three.js melalui contoh dan gambar terperinci. Saya berharap ini akan membantu untuk pembelajaran semua orang. Editor akan memilah artikel terkait pada tiga.js satu demi satu. Teman -teman yang tertarik dengan tiga.js, terus mendukung wulin.com.