คำนำ
วัสดุเป็นคุณสมบัติที่เกี่ยวข้องกับผลกระทบการแสดงผลโดยไม่ขึ้นกับข้อมูลจุดสุดยอดวัตถุ โดยการตั้งค่าวัสดุคุณสามารถเปลี่ยนสีแผนที่พื้นผิวโหมดแสง ฯลฯ ของวัตถุ
Meshbasicmaterial: ไม่มีความรู้สึกของแสงทำให้เรขาคณิตมีสีหรือจอแสดงผล
Meshlambertmaterial: วัสดุนี้ตอบสนองต่อแสงและใช้ในการสร้างวัตถุสลัวและไม่ใช่แสง
Meshphongmaterial: วัสดุนี้ยังทำปฏิกิริยากับแสงและใช้เพื่อสร้างวัตถุโลหะสว่าง
1. วัสดุพื้นฐาน
ใช้วัตถุวัสดุพื้นฐานสีของวัตถุหลังจากการเรนเดอร์เป็นสีของวัสดุที่ไม่มีแสงและมืดหรือเงาเนื่องจากแสง หากไม่มีสีสำหรับวัสดุที่ระบุสีจะสุ่ม ตัวสร้างของมันคือ:
Three.MeshlambertMaterial (OPT)
ในหมู่พวกเขา OPT สามารถเริ่มต้นหรือเป็นค่าที่มีแต่ละแอตทริบิวต์ ตัวอย่างเช่นสร้างวัสดุสีเหลืองใหม่ที่มีความทึบ 0.75:
ใหม่ three.meshbasicmaterial ({color: 0xffff00, ความทึบ: 0.75});นำไปใช้กับลูกบาศก์ (ดู "สาม.JSการเรียนรู้เรขาคณิต" เอฟเฟก
ซอร์สโค้ด:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js ทดสอบ 7.1 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <script type = "text/javascript"> function init () {var renderer = new three.webglrenderer ({canvas: document.getElementById ('maincanvas')}); render.setClearColor (0x0000000); var scene = new Three.scene (); // กล้อง var camera = ใหม่ Three.othographicCamera (-5, 5, 3.75, -3.75, 0.1, 100); camera.position.set (25, 25, 25); camera.lookat (ใหม่ Three.vector3 (0, 0, 0)); scene.add (กล้อง); // แสง var light = ใหม่สามจุดไฟ (0xffffff, 1, 100); Light.position.set (10, 15, 5); scene.add (เบา); VAR วัสดุ = ใหม่ Three.MeshBasicMaterial ({color: 0xffff00, ความทึบ: 0.75}); var cube = new Three.Mesh (ใหม่สาม cubegeometry (5, 5, 5), วัสดุ); scene.add (Cube); renderer.render (ฉาก, กล้อง); } </script> </html>คุณสมบัติที่ใช้กันทั่วไปหลายประการของ วัสดุพื้นฐาน :
・ มองเห็นได้: ไม่ว่าจะมองเห็นได้ค่าเริ่มต้นจะเป็นจริง
・ ด้านข้าง: แสดงผลด้านหน้าหรือด้านหลังของใบหน้าค่าเริ่มต้นคือด้านหน้าสามด้านหน้าซึ่งสามารถตั้งค่าไว้ที่ด้านหลังสามด้านหลังหรือสองด้านสองด้าน
・ wireframe: ไม่ว่าจะแสดงบรรทัดแทนใบหน้าค่าเริ่มต้นเป็นเท็จ
・ สี: สี hexadecimal RGB ถ้าสีแดงแสดงเป็น 0xff0000
・ แผนที่: ใช้แผนที่พื้นผิว
สำหรับวัสดุพื้นฐานแม้ว่าแหล่งกำเนิดแสงในฉากจะเปลี่ยนไปวัตถุที่ใช้วัสดุนั้นมักจะมีเอฟเฟกต์เหมือนกันในสีทุกที่ แน่นอนว่านี่ไม่สมจริงมากนักดังนั้นเราจะแนะนำรุ่นแสงที่สมจริงยิ่งขึ้น: รุ่นแสงแลมเบิร์ตและรุ่นแสงพงt
2. วัสดุแลมเบอร์และวัสดุพง
Material Lambert (Meshlambertmaterial) เป็นวัสดุที่สอดคล้องกับรูปแบบแสงของ Lambert คุณลักษณะหลักของรูปแบบแสงแลมเบิร์ตคือมันพิจารณาเฉพาะการสะท้อนแสง แต่ไม่ได้พิจารณาถึงผลกระทบของการสะท้อนแบบ specular ดังนั้นจึงไม่เหมาะสำหรับวัตถุเช่นโลหะและกระจกที่ต้องการการสะท้อนแบบพิเศษและเหมาะสำหรับผลการสะท้อนการกระจายของวัตถุอื่น ๆ ส่วนใหญ่
สูตรรุ่นแสงคือ:
idiffuse = kd * id * cos (theta)
ในหมู่พวกเขา Idiffuse คือความเข้มของแสงกระจาย KD เป็นคุณลักษณะการสะท้อนแบบกระจายของพื้นผิววัตถุ id คือความเข้มของแสงและ theta เป็นมุมโค้งของแสง
แน่นอนสำหรับวัสดุแลมเบิร์ตที่ใช้สาม js คุณไม่จำเป็นต้องเข้าใจสูตรข้างต้นเพื่อใช้โดยตรง
วิธีการสร้างวัสดุ Lambert สีเหลืองคือ:
ใหม่ Three.MeshlambertMaterial ({color: 0xffff00})หลังจากใช้แสงแล้วคุณจะได้รับเอฟเฟกต์ต่อไปนี้:
สีใช้เพื่อแสดงความสามารถของวัสดุในการสะท้อนแสงที่กระจัดกระจายและยังเป็นคุณลักษณะที่ใช้กันมากที่สุดเพื่อตั้งค่าสีของวัสดุ นอกจากนี้คุณยังสามารถใช้สภาพแวดล้อมและเปล่งแสงเพื่อควบคุมสีของวัสดุ
โดยรอบแสดงถึงความสามารถในการสะท้อนแสงเพื่อแสงโดยรอบ ค่านี้ใช้ได้เฉพาะเมื่อมีการตั้งค่า ambientlight ความสามารถในการสะท้อนแสงของวัสดุในการส่องสว่างโดยรอบถูกคูณด้วยความเข้มแสงโดยรอบเพื่อให้ได้สีที่แท้จริงของวัสดุ
Emissive เป็นสีที่ส่องสว่างด้วยตนเองของวัสดุซึ่งสามารถใช้เพื่อแสดงสีของแหล่งกำเนิดแสง มันไม่ใช่แหล่งกำเนิดแสง แต่เป็นสีที่ไม่ได้รับผลกระทบจากแสง การเรืองแสงในตัวเองในสีแดงเพียงอย่างเดียว:
ใหม่ Three.MeshlambertMaterial ({emitive: 0xff0000})ผลคือ:
หากใช้แสงสีแดงและแสงสีเหลืองกระจัดกระจาย:
ใหม่ Three.MeshlambertMaterial ({color: 0xffff00, Emitive: 0xff0000})ผลคือ:
ผลกระทบของทรงกลม:
สรุปคุณสมบัติที่เป็นเอกลักษณ์ของวัสดุแลมเบอร์:
โดยรอบ: ตั้งค่าสีโดยรอบของวัสดุและใช้กับแหล่งกำเนิดแสงโดยรอบ สีนี้จะถูกคูณด้วยสีแสงโดยรอบ นั่นคือการตอบสนองต่อแหล่งกำเนิดแสง
Emissive: ตั้งค่าสีที่ปล่อยออกมาจากวัสดุไม่ใช่แหล่งกำเนิดแสง แต่เป็นสีที่ไม่ได้รับผลกระทบจากแสง ค่าเริ่มต้นคือสีดำ
ซอร์สโค้ด:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test7.2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> src = "js/three.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new Three.webGlrenderer ({canvas: document.getElementById ('maincanvas')}); render.setClearColor (0x0000000); var scene = new Three.scene (); // กล้อง var camera = ใหม่ Three.othographicCamera (-5, 5, 3.75, -3.75, 0.1, 100); camera.position.set (25, 25, 25); camera.lookat (ใหม่ Three.vector3 (0, 0, 0)); scene.add (กล้อง); // แสง var light = ใหม่สามจุดไฟ (0xffffff, 1, 100); Light.position.set (10, 15, 5); scene.add (เบา); VAR วัสดุ = ใหม่ Three.MeshlambertMaterial ({color: 0xffff00, emitive: 0xff0000}); var cube = new Three.Mesh (ใหม่สาม cubegeometry (5, 5, 5), วัสดุ); scene.add (Cube); // var Sphere = ใหม่สามเม. (ใหม่สาม.Spheregeometry (3, 20, 8), วัสดุ); // scene.add (ทรงกลม); renderer.render (ฉาก, กล้อง); } </script> </html>วัสดุ 3.phong
วัสดุพงษ์ (meshphongmaterial) เป็นวัสดุที่สอดคล้องกับรูปแบบแสงฟอง ซึ่งแตกต่างจากแลมเบิร์ตโมเดลพงฯ จะพิจารณาผลของการสะท้อนแบบพิเศษดังนั้นจึงเหมาะอย่างยิ่งสำหรับประสิทธิภาพของโลหะและกระจก
ส่วนการสะท้อนแบบกระจายและรูปแบบแสงของแลมเบิร์ตเหมือนกันและแบบจำลองของชิ้นส่วนการสะท้อนแบบ specular คือ:
Ispecular = Ks * Is * (cos(alpha)) ^ n
ในหมู่พวกเขา ispecular คือความเข้มของแสงที่สะท้อนโดยพื้นผิว specular, ks เป็นค่าสัมประสิทธิ์การสะท้อนแบบ specular ของพื้นผิววัสดุคือความเข้มของแหล่งกำเนิดแสงอัลฟ่าคือมุมระหว่างแสงสะท้อนและเส้นสายตา N คือดัชนีไฮไลท์และจุดไฮไลต์ขนาดใหญ่
เนื่องจากส่วนการสะท้อนแบบกระจายนั้นสอดคล้องกับโมเดล Lambert หากไม่ได้ระบุค่าสัมประสิทธิ์การสะท้อนแบบ specular แต่มีการตั้งค่าการสะท้อนแบบกระจายเท่านั้นเอฟเฟกต์จะเหมือนกับของ Lambert:
ใหม่สาม meshphongmaterial ({color: 0xffff00});ในทำนองเดียวกันสามารถระบุค่าการปล่อยและค่าโดยรอบและจะไม่อธิบายที่นี่ ค่าสัมประสิทธิ์การสะท้อนแบบพิเศษมีการระบุไว้ด้านล่าง ก่อนอื่นเราใช้การสะท้อนแบบพิเศษตั้งค่าไฮไลต์เป็นสีแดงและนำไปใช้กับทรงกลม:
VAR วัสดุ = ใหม่ Three.MeshphongMaterial ({specular: 0xff0000}); var Sphere = new Three.Mesh (ใหม่ Three.spheregeometry (3, 20, 8), วัสดุ);ผลคือ:
ค่า N-value ในรูปแบบแสงสามารถควบคุมได้ผ่านแอตทริบิวต์ความเงางาม เมื่อค่าความเงางามมีขนาดใหญ่ขึ้นจุดไฮไลต์ที่เล็กลงและค่าเริ่มต้นคือ 30 เมื่อเราตั้งค่าเป็น 1,000:
ใหม่สาม meshphongmaterial ({specular: 0xff0000, ความเงางาม: 1000});ผลคือ:
ใช้แสงกระจกสีเหลือง, แสงสีแดงกระจัดกระจาย:
วัสดุ = ใหม่สาม meshphongmaterial ({color: 0xff0000, specular: 0xffff00, ความมันวาว: 100});สรุปคุณสมบัติที่เป็นเอกลักษณ์ของวัสดุพง
โดยรอบ: ตั้งค่าสีโดยรอบของวัสดุและใช้กับแหล่งกำเนิดแสงโดยรอบ สีนี้จะถูกคูณด้วยสีแสงโดยรอบ นั่นคือการตอบสนองต่อแหล่งกำเนิดแสง
Emissive: ตั้งค่าสีที่ปล่อยออกมาจากวัสดุไม่ใช่แหล่งกำเนิดแสง แต่เป็นสีที่ไม่ได้รับผลกระทบจากแสง ค่าเริ่มต้นคือสีดำ
specular: ระบุความสว่างของวัสดุและสีของไฮไลท์ หากตั้งค่าเป็นสีเดียวกับคุณสมบัติสีจะได้รับวัสดุที่คล้ายโลหะอื่นอีก หากตั้งค่าเป็นสีเทาสีเทามันจะดูเหมือนพลาสติก
ความเงางาม: ระบุความสว่างของส่วนไฮไลต์ค่าเริ่มต้นคือ 30
ซอร์สโค้ด:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test7.3 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> src = "js/three.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new Three.webGlrenderer ({canvas: document.getElementById ('maincanvas')}); render.setClearColor (0x0000000); var scene = new Three.scene (); // กล้อง var camera = ใหม่ Three.othographicCamera (-5, 5, 3.75, -3.75, 0.1, 100); camera.position.set (25, 25, 25); camera.lookat (ใหม่ Three.vector3 (0, 0, 0)); scene.add (กล้อง); // แสง var light = ใหม่สามจุดไฟ (0xffffff, 1, 200); Light.position.set (10, 15, 25); scene.add (เบา); VAR วัสดุ = ใหม่สาม meshphongmaterial ({// specular: 0xff0000, สี: 0xff0000, specular: 0xffff00, ความเงางาม: 100}); // var cube = ใหม่ Three.Mesh (ใหม่ Three.cubegeometry (5, 5, 5), วัสดุ); // scene.add (Cube); var Sphere = new Three.Mesh (ใหม่ Three.spheregeometry (3, 20, 8), วัสดุ); scene.add (ทรงกลม); renderer.render (ฉาก, กล้อง); } </script> </html>สรุป
เนื้อหาของบทความนี้จบลงที่นี่ บทความแนะนำ Lamber และ Phong ในสาม js ผ่านตัวอย่างและรูปภาพโดยละเอียด ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน บรรณาธิการจะจัดเรียงบทความที่เกี่ยวข้องในสาม js หนึ่งหลังจากนั้นอีก เพื่อนที่สนใจสาม.jsโปรดสนับสนุน Wulin.com ต่อไป