1. รูปร่างข้อความ
เมื่อพูดถึงข้อความ 3 มิติฉันจำคำศัพท์ทางศิลปะในคำพูดในช่วงปีแรก ๆ ของฉัน:
จากนั้น TextGeometry สามารถใช้เพื่อสร้างรูปร่างข้อความสามมิติ
การใช้รูปร่างข้อความต้องดาวน์โหลดและอ้างถึงไลบรารีตัวอักษรเพิ่มเติม ที่นี่ลองใช้ตัวอักษร helvetiker เป็นตัวอย่าง
อ้าง:
<script type = "text/javascript" src = "เส้นทางของคุณ/helvetiker_regular.typeface.json"> </script>
ตัวสร้างของ textgeometry คือ:
Three.textGeometry (ข้อความ, พารามิเตอร์)
ข้อความเป็นสตริงที่แท้จริง
พารามิเตอร์เป็นวัตถุที่ประกอบด้วยพารามิเตอร์ต่อไปนี้:
・ ขนาด: ขนาดตัวอักษรโดยทั่วไปความสูงของตัวอักษรตัวใหญ่
・ ความสูง: ความหนาของข้อความ
curvesegments: จำนวนส่วนโค้งทำให้เส้นโค้งของข้อความราบรื่นขึ้น
・ แบบอักษร: ตัวอักษร, ค่าเริ่มต้นคือ 'Helvetiker' และไฟล์ตัวอักษรที่ต้องอ้างอิง
・ น้ำหนัก: ค่าเป็น 'ปกติ' หรือ 'ตัวหนา' แสดงว่ามันหนาขึ้น
・ สไตล์: ค่าคือ 'ปกติ' หรือ 'ตัวเอียง' ซึ่งบ่งบอกว่าตัวเอียงเป็นตัวเอียง
・ bevelenabled: ค่าบูลีนไม่ว่าจะใช้ Charmfer หรือไม่หมายถึงการตัดที่ขอบอย่างเอียง
・ bevelthickness: ความหนาของการลบล้าง
・ bevelsize: ความกว้างของการลบหลู่
สร้างข้อความสามมิติ: new THREE.TextGeometry('Hello', {size: 1, height: 1})， เอฟเฟกต์ของมันคือ:
วัสดุและแสงสามารถปรับได้อย่างเหมาะสมเพื่อให้ได้ผลที่ต้องการ:
// metal shining object วัสดุ var = ใหม่สาม meshphongmaterial ({color: 0xffff00, specular: 0xffff00, // ระบุความสว่างของวัสดุและสีของชิ้นส่วนไฮไลต์หากตั้งค่าเป็นสีเดียวกัน 30}); // ทิศทางแสง var light = ใหม่สามทิศทาง Altight (0xffffff); Light.position.set (-5, 10, 5); scene.add (แสง);ซอร์สโค้ด:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js ทดสอบหก </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> <!-ค้นหาข้อมูลเพิ่มเติมได้ที่ https://github.com/mrdoob/three.js/tree/master/examples/fonts-> <script type = "text/javascript"> function init () {var renderer = ใหม่สาม 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 (1, 0, 0)); scene.add (กล้อง); // var material = ใหม่ three.meshbasicmaterial ({// color: 0xffff00, // wireframe: true //}); // metal shining Object วัสดุ VAR = ใหม่สาม meshphongmaterial ({color: 0xffff00, specular: 0xffff00, // ระบุความสว่างของวัสดุและสีของชิ้นส่วนไฮไลต์หากตั้งค่าเป็นสีเดียวกัน // ทิศทางแสง var light = new สามทิศทางการส่องสว่าง (0xffffff); Light.position.set (-5, 10, 5); scene.add (เบา); // โหลดตัวอักษร var loader = new Three.fontloader (); loader.load ('./ helvetiker_regular.typeface.json', ฟังก์ชั่น (ตัวอักษร) {var mesh = ใหม่สามเม. } </script> </html>2. รูปร่างที่กำหนดเอง
สำหรับรูปร่างที่ไม่ได้จัดทำโดยสาม js สามารถจัดทำรูปร่างที่กำหนดเองเพื่อสร้าง
เนื่องจากรูปร่างที่กำหนดเองจำเป็นต้องใช้ข้อกำหนดด้วยตนเองของแต่ละตำแหน่งจุดสุดยอดและการเชื่อมต่อจุดสุดยอดหากรูปร่างมีความซับซ้อนมากการคำนวณของโปรแกรมเมอร์จะค่อนข้างใหญ่ ในกรณีนี้ขอแนะนำให้สร้างแบบจำลองในซอฟต์แวร์การสร้างแบบจำลองเช่น 3DS MAX จากนั้นนำเข้าสู่ฉากโดยใช้ Three.js ซึ่งจะมีประสิทธิภาพและสะดวกกว่า
รูปร่างที่กำหนดเองใช้คลาส Geometry ซึ่งเป็นคลาสหลักของรูปทรงเรขาคณิตอื่น ๆ เช่น CubeGeometry , SphereGeometry ฯลฯ และตัวสร้างคือ:
THREE.Geometry()
เริ่มต้นเรขาคณิตจากนั้นตั้งค่าตำแหน่งจุดสุดยอดและสถานะการเชื่อมต่อจุดสุดยอด:
ซอร์สโค้ด:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js ทดสอบหก-two </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> <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 วัสดุ = ใหม่ Three.MeshBasicMaterial ({color: 0xffff00, wireframe: true}); // เริ่มต้นเรขาคณิตเรขาคณิตเรขาคณิต = ใหม่สาม GEOMETRY (); // ตั้งค่าตำแหน่งจุดสุดยอด // 4 จุดยอดรูปทรงเรขาคณิต Vertices.push (ใหม่ Three.Vector3 (-1, 2, -1)); Geometry.vertices.push (ใหม่ Three.vector3 (1, 2, -1)); Geometry.vertices.push (ใหม่ Three.vector3 (1, 2, 1)); Geometry.vertices.push (ใหม่ Three.vector3 (-1, 2, 1)); Geometry.vertices.push (ใหม่ Three.vector3 (-1, 2, 1)); Geometry.vertices.push (ใหม่ Three.vector3 (-1, 2, 1)); Geometry.vertices.push (ใหม่ Three.vector3 (-1, 2, 1)); Geometry.vertices.push (ใหม่ Three.vector3 (-1, 2, 1)); // ด้านล่าง 4 จุดยอดรูปทรงเรขาคณิต Vertices.push (ใหม่ Three.Vector3 (-2, 0, -2)); Geometry.vertices.push (ใหม่ Three.vector3 (2, 0, -2)); Geometry.vertices.push (ใหม่ Three.vector3 (2, 0, 2)); Geometry.vertices.push (ใหม่ Three.vector3 (2, 0, 2)); Geometry.vertices.push (ใหม่ Three.vector3 (-2, 0, 2)); // ตั้งค่าสถานะการเชื่อมต่อจุดสุดยอด // รูปทรงเรขาคณิตด้านบน. faces.push (ใหม่ Three.Face3 (0, 1, 3)); geometry.faces.push (ใหม่สาม.face3 (1, 2, 3)); // geometry.faces.push (ใหม่ Three.Face4 (0, 1, 2, 3)); // รูปทรงเรขาคณิตด้านล่าง. faces.push (ใหม่ Three.Face3 (4, 5, 6)); Geometry.faces.push (ใหม่สาม face3 (5, 6, 7)); // geometry.faces.push (ใหม่ Three.Face4 (4, 5, 6, 7)); // เรขาคณิตด้านข้าง. faces.push (ใหม่ Three.Face3 (1, 5, 6)); Geometry.faces.push (ใหม่สาม face3 (6, 2, 1)); Geometry.faces.push (ใหม่สาม face3 (2, 6, 7)); Geometry.faces.push (ใหม่สาม face3 (7, 3, 2)); Geometry.faces.push (ใหม่สาม face3 (3, 7, 0)); Geometry.faces.push (ใหม่สาม face3 (7, 4, 0)); Geometry.faces.push (ใหม่สาม face3 (0, 4, 5)); Geometry.faces.push (ใหม่สาม face3 (0, 4, 5)); Geometry.faces.push (ใหม่สาม face3 (0, 4, 5)); Geometry.faces.push (ใหม่ Three.Face3 (0, 5, 1)); // // ใบหน้าประกอบด้วยสี่จุดยอด // geometry.faces.push (ใหม่สาม face4 (0, 1, 5, 4)); // geometry.faces.push (ใหม่ Three.Face4 (1, 2, 6, 5)); // geometry.faces.push (ใหม่ Three.Face4 (2, 3, 7, 6)); // geometry.faces.push (ใหม่ Three.Face4 (3, 0, 4, 7)); var mesh = new Three.Mesh (รูปทรงเรขาคณิต, วัสดุ); scene.add (ตาข่าย); // renderer.render (ฉาก, กล้อง); } </script> </html> ควรสังเกตว่า new THREE.Vector3(-1, 2, -1) สร้างเวกเตอร์ที่ผนวกเข้ากับอาร์เรย์ geometry.vertices เป็นตำแหน่งจุดสุดยอด
และใบหน้าที่ประกอบด้วยจุดยอดสามจุดถูกสร้างขึ้นโดย new THREE.Face3(0, 1, 2) และต่อท้ายกับ geometry.faces อาร์เรย์ พารามิเตอร์สามตัวคือหมายเลขลำดับของจุดยอดทั้งสามใน geometry.vertices หากคุณต้องการตั้งค่าแพตช์ประกอบด้วยสี่จุดยอดคุณสามารถใช้ THREE.Face4 ได้เช่นเดียวกัน
// รูปทรงเรขาคณิตด้านบน. faces.push (ใหม่สาม face4 (0, 1, 2, 3)); // geometry.faces.faces.push (ใหม่ Three.Face4 (4, 5, 6, 7)); // สี่ด้านเรขาคณิต 5)); geometry.faces.push (ใหม่สาม face4 (2, 3, 7, 6)); geometry.faces.push (ใหม่ Three.Face4 (2, 3, 7, 6)); Geometry.faces.push (ใหม่สาม face4 (3, 0, 4, 7));
ข้างต้นเป็นเนื้อหาทั้งหมดของรูปทรงข้อความการเรียนรู้สาม.JSและรูปร่างที่กำหนดเองที่รวบรวมโดยตัวแก้ไข บรรณาธิการได้รวบรวมบทความที่เกี่ยวข้องหลายฉบับเกี่ยวกับสาม js หากคุณต้องการคุณสามารถดูได้ผ่านลิงก์ของบทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่ามันจะช่วยให้ทุกคนที่เรียนรู้สาม js