คำนำ
บรรณาธิการได้เผยแพร่เกี่ยวกับรูปทรงเรขาคณิตและวัสดุมาก่อน ฉันเชื่อว่าหลังจากที่คุณได้อ่านและเรียนรู้เราสามารถใช้มันเพื่อสร้างวัตถุ วัตถุที่ใช้กันมากที่สุดคือตาข่ายซึ่งเป็นวัตถุที่ประกอบด้วยจุดยอดขอบใบหน้า ฯลฯ ; วัตถุอื่น ๆ รวมถึงกลุ่มเส้นกระดูกระบบอนุภาค ฯลฯ เพื่อสร้างวัตถุคุณต้องระบุรูปร่างและวัสดุทางเรขาคณิต ในหมู่พวกเขารูปร่างทางเรขาคณิตกำหนดตำแหน่งของจุดสุดยอดของวัตถุและข้อมูลอื่น ๆ และวัสดุจะกำหนดสีพื้นผิวและข้อมูลอื่น ๆ ของวัตถุ
1. สร้างกริด
ในบทความก่อนหน้านี้เราได้เรียนรู้วิธีการสร้างรูปทรงเรขาคณิตและวัสดุและการสร้างตาข่ายนั้นง่ายมากเพียงแค่ผ่านรูปทรงเรขาคณิตและวัสดุเข้าไปในตัวสร้าง วัตถุที่ใช้กันมากที่สุดคือตาข่ายซึ่งแสดงถึงรูปทรงเรขาคณิตที่มีจุดเส้นและพื้นผิว ตัวสร้างของมันคือ:
ตาข่าย (เรขาคณิตวัสดุ)
ที่นี่มาเรียนรู้วิธีสร้างกริดด้วยตัวอย่างที่เฉพาะเจาะจง:
VAR วัสดุ = ใหม่ Three.MeshlambertMaterial ({color: 0xffff00}); var geometry = ใหม่ three.cubegeometry (1, 2, 3); var mesh = ใหม่สาม mesh (รูปทรงเรขาคณิต, วัสดุ); scene.add (mesh);หากวัสดุและเรขาคณิตไม่ได้นำกลับมาใช้ใหม่หลังจากนั้นพวกเขาก็สามารถเขียนด้วยกันเป็น:
var mesh = new Three.Mesh (ใหม่ Three.CubeGeometry (1, 2, 3), ใหม่ Three.MeshlambertMaterial ({color: 0xffff00})); scene.add (mesh);หลังจากเพิ่มแสงแล้วผลลัพธ์คือ:
หากไม่ได้ระบุวัสดุวัสดุที่มีโครงลวดจริงจะถูกสุ่มในแต่ละครั้ง สีหลังจากรีเฟรชหน้าจะแตกต่างกัน ผลหนึ่งที่เป็นไปได้คือ:
ซอร์สโค้ด:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js ทดสอบ 9.1 </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 (-2.5, 2.5, 1.875, -1.875, 0.1, 100); camera.position.set (5, 5, 20); camera.lookat (ใหม่ Three.vector3 (0, 0, 0)); scene.add (กล้อง); VAR วัสดุ = ใหม่ Three.MeshlambertMaterial ({color: 0xffff00}); // VAR วัสดุ = ใหม่ Three.MeshBasicMaterial ({// color: 0xffff00, // wireframe: true //}); var geometry = ใหม่สาม cubegeometry (1, 2, 3); var mesh = new Three.Mesh (รูปทรงเรขาคณิต, วัสดุ); scene.add (ตาข่าย); var light = ใหม่สามทิศทาง Alt (0xffffff); Light.position.set (20, 10, 5); scene.add (เบา); // renderer.render (ฉาก, กล้อง); } </script> </html>2. แก้ไขคุณสมบัติ
2.1 ปรับเปลี่ยนวัสดุ
นอกเหนือจากการระบุวัสดุในตัวสร้างวัสดุยังสามารถแก้ไขได้หลังจากสร้างตาข่าย:
VAR วัสดุ = ใหม่ Three.MeshlambertMaterial ({color: 0xffff00}); var geometry = ใหม่ three.cubegeometry (1, 2, 3); var mesh = ใหม่สามเมท (เรขาคณิตวัสดุ); scene.add (mesh); mesh.material = ใหม่สาม meshlambertmaterial ({color: 0xff0000});สีสุดท้ายคือสีแดง:
ซอร์สโค้ด:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test9.2 </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 (-2.5, 2.5, 1.875, -1.875, 0.1, 100); camera.position.set (5, 5, 20); camera.lookat (ใหม่ Three.vector3 (0, 0, 0)); scene.add (กล้อง); VAR วัสดุ = ใหม่สาม meshlambertmaterial ({color: 0xffff00}); var geometry = ใหม่สาม cubegeometry (1, 2, 3); var mesh = new Three.Mesh (รูปทรงเรขาคณิต, วัสดุ); scene.add (ตาข่าย); mesh.material = ใหม่สาม meshlambertmaterial ({color: 0xff0000}); var light = ใหม่สามทิศทาง Alt (0xffffff); Light.position.set (20, 10, 5); scene.add (เบา); // renderer renderer.render (ฉาก, กล้อง); } </script> </html>2.2 ตำแหน่งซูมการหมุน
ตำแหน่งการปรับขนาดและการหมุนเป็นคุณสมบัติทั่วไปสามประการของวัตถุ ตั้งแต่สามเมชขึ้นอยู่กับสาม.Object3Dมันมีสามแอตทริบิวต์: มาตราส่วนการหมุนและตำแหน่ง พวกเขาทั้งสามอินสแตนซ์ Vector3 ดังนั้นวิธีการแก้ไขค่าของพวกเขาจะเหมือนกันนี่คือการรับตำแหน่งเป็นตัวอย่าง
Three.Vector3 มีสามแอตทริบิวต์: x, y และ z หากคุณตั้งค่าแอตทริบิวต์หนึ่งคุณสามารถใช้วิธีการต่อไปนี้:
mesh.position.z = 1;
หากคุณต้องการตั้งค่าคุณสมบัติหลายอย่างในเวลาเดียวกันคุณสามารถใช้สองวิธีต่อไปนี้:
mesh.position.set (1.5, -0.5, 0);
หรือ:
mesh.position = ใหม่ three.vector3 (1.5, -0.5, 0);
แอตทริบิวต์ที่สอดคล้องกันของการปรับสเกลคือมาตราส่วนและแอตทริบิวต์ที่สอดคล้องกันของการหมุนคือการหมุน วิธีการเฉพาะนั้นเหมือนกับตัวอย่างข้างต้นซึ่งบ่งบอกถึงการปรับขนาดหรือการหมุนตามแกนสามแกน x, y และ z ตามลำดับ
ซอร์สโค้ด:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test9.3 </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 (-2.5, 2.5, 1.875, -1.875, 0.1, 100); camera.position.set (5, 5, 20); camera.lookat (ใหม่ Three.vector3 (0, 0, 0)); scene.add (กล้อง); VAR วัสดุ = ใหม่สาม meshlambertmaterial ({color: 0xffff00}); var geometry = ใหม่สาม cubegeometry (1, 2, 3); var mesh = new Three.Mesh (รูปทรงเรขาคณิต, วัสดุ); scene.add (ตาข่าย); mesh.position.set (1.5, -0.5, 0); mesh.position = ใหม่ three.vector3 (1.5, -0.5, 0); mesh.position.z = 1; var light = ใหม่สามทิศทาง Alt (0xffffff); Light.position.set (20, 10, 5); scene.add (เบา); drawaxes (ฉาก); // renderer.render (ฉาก, กล้อง); } ฟังก์ชั่น drawaxes (ฉาก) {// x-axis var xgeo = ใหม่สาม geometry (); xgeo.vertices.push (ใหม่ Three.vector3 (0, 0, 0)); xgeo.vertices.push (ใหม่ Three.vector3 (1, 0, 0)); var xmat = ใหม่ three.lineBasicMaterial ({color: 0xff0000}); var xaxis = ใหม่สามบรรทัด (XGEO, XMAT); scene.add (xaxis); // y-axis var ygeo = ใหม่สาม geometry (); ygeo.vertices.push (ใหม่ Three.vector3 (0, 0, 0)); ygeo.vertices.push (ใหม่ Three.vector3 (0, 1, 0)); var ymat = ใหม่ three.lineBasicMaterial ({color: 0x00ff00}); var yaxis = ใหม่สามบรรทัด (ygeo, ymat); scene.add (Yaxis); // z-axis var zgeO = ใหม่สาม GEOMETRY (); zgeo.vertices.push (ใหม่ Three.vector3 (0, 0, 0)); zgeo.vertices.push (ใหม่ Three.vector3 (0, 0, 1)); var zmat = ใหม่ three.lineBasicMaterial ({color: 0x00ccff}); var zaxis = ใหม่สามบรรทัด (zgeo, zmat); scene.add (Zaxis); } </script> </html>เนื้อหาของบทความนี้จบลงที่นี่ บทความแนะนำกริดในสาม.jsผ่านตัวอย่างและรูปภาพโดยละเอียด ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับทุกคนในการเรียนรู้สาม js