คำนำ
Three.js เป็นไลบรารี 3DJS ซึ่งเป็นหนึ่งในเฟรมเวิร์กโอเพ่นซอร์ส WebGL ที่ยอดเยี่ยมที่สุด นอกเหนือจาก WebGL แล้ว Three.js ยังมีตัวแสดงผลตามแท็ก Canvas และ SVG ขอแนะนำให้ใช้ Chrome หรือ Firefox สำหรับการดีบัก
1. กล้อง
กล้องในกราฟิกกำหนดวิธีการฉายพื้นที่สามมิติสำหรับหน้าจอสองมิติ
สำหรับวิธีการฉายกล้องจะถูกแบ่งออกเป็นกล้องฉายมุมฉากและกล้องการฉายมุมมอง
2. ความแตกต่างและขอบเขตของการใช้กล้องสองตัว
การฉายภาพมุมฉาก:
การฉายมุมมอง:
การฉายภาพมุมฉากเป็นเหมือนภาพในชั้นเรียนคณิตศาสตร์ ในขณะที่การฉายมุมมองมีจุดพื้นฐานนั่นคือวัตถุในระยะไกลมีขนาดเล็กกว่าวัตถุในระยะใกล้และมีขนาดใหญ่ขึ้นและเล็กลงในระยะใกล้
สำหรับซอฟต์แวร์การวาดและการสร้างแบบจำลองมักใช้การฉายมุมฉาก สำหรับแอปพลิเคชันอื่น ๆ ส่วนใหญ่มักใช้การฉายมุมมอง
3. กล้องถ่ายภาพมุมฉาก
ตัวสร้างกล้องฉายมุมฉาก:
Three.othographicCamera (ซ้าย, ขวา, ด้านบน, ล่าง, ใกล้, ใกล้, ไกล)
พารามิเตอร์ทั้งหกแสดงตำแหน่งของใบหน้าทั้งหกใบหน้าที่ถ่ายโดยกล้องฉายมุมฉาก
ในหมู่พวกเขา ใกล้แสดงถึงระยะทางแนวตั้งระหว่างระนาบใกล้และจุดกึ่งกลางของกล้อง ไกลแสดงถึงระยะห่างแนวตั้งระหว่างระนาบไกลและจุดกึ่งกลางของกล้อง
ในการรักษาอัตราส่วนแนวนอนและแนวตั้งของกล้อง อัตราส่วนของ (ซ้ายซ้าย) ต่อ (ด้านล่าง) จะต้องสอดคล้องกับอัตราส่วนภาพของผืนผ้าใบ
ดังที่เห็นได้จากรูปค่าของใกล้และไกลควรเป็นบวกและ ไกล> ใกล้ หากค่าสองค่าสุดท้ายคือ (0, 0) นั่นคือค่าที่อยู่ใกล้และไกลจะเหมือนกันความลึกของร่างกายการดูจะหายไปและร่างกายที่ดูทั้งหมดจะถูกกดลงในระนาบจอแสดงผลจะไม่ถูกต้อง
4. ตัวอย่างกล้องถ่ายภาพมุมฉาก
ซอร์สโค้ด:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js ทดสอบ 2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> type = "text/javascript"> function init () {var renderer = new.webglrenderer ({canvas: document.getElementById ('maincanvas')}); render.setClearColor (0x0000000); var scene = new Three.scene (); // ตั้งค่ากล้อง VAR กล้อง = ใหม่ Three.othographicCamera (-2, 2, 1.5, -1.5, 1, 10); camera.position.set (0, 0, 5); //camera.lookat( ใหม่ Three.vector3 (0, 0, 0)); scene.add (กล้อง); // สร้าง cube var cube = ใหม่สาม MESH (ใหม่ Three.CubeGeometry (1, 1, 1), ใหม่ Three.MeshBasicMaterial ({color: 0xff0000, wireframe: true})); scene.add (Cube); // renderer.render (ฉาก, กล้อง); } </script> </body> </html> โดยที่หากคุณสมบัติของ โครงร่าง THREE.MeshBasicMaterial เป็น ความจริง วัสดุจะถูกแสดงเป็นโครงลวด
คุณจะเห็นว่าขอบด้านหลังตำแหน่งปัจจุบันจะตรงกับด้านหน้า:
4.1 เปลี่ยนอัตราส่วนความยาวและความกว้างของมุมมอง
ที่นี่อัตราส่วนภาพของผ้าใบคือ 4: 3 ระยะทางแนวนอนของกล้องคือ 4 และระยะทางแนวตั้งคือ 3 ดังนั้นอัตราส่วนความยาวและความกว้างยังคงไม่เปลี่ยนแปลง (1: 1)
หากระยะทางแนวนอนของกล้องลดลงเหลือ 2
VAR CAMERA = ใหม่ Three.othographicCamera (-1,1,1,1.5, -1.5,1,10);
วัตถุจะยาวขึ้น:
มุมมองของกล้องนั้นแคบลงส่งผลให้สัดส่วนด้านข้างของลูกบาศก์เพิ่มขึ้นภายในมุมมองซึ่งแสดงออกมาเป็นคิวบ์ที่กว้างขึ้น
4.2 เปลี่ยนตำแหน่งกล้อง
ตำแหน่งกล้องในตัวอย่างคือ (0,0,5) เนื่องจากกล้องถูกวางในทิศทางลบของแกน z โดยค่าเริ่มต้นคุณสามารถเห็นลูกบาศก์ที่จุดกำเนิด
เลื่อนตำแหน่งกล้องด้วย 1 หน่วยไปทางขวา:
VAR CAMERA = ใหม่ Three.othographicCamera (-2,2,1.5, -1.5,1,10); camera.position.set (1,0,5);
กล้องหันหน้าไปทางวัตถุดังนั้นกล้องจะเคลื่อนที่ไปทางขวาและวัตถุที่ส่องสว่างจะเคลื่อนที่ไปทางซ้าย:
4.3 เปลี่ยนตำแหน่งของมุมมอง
ตั้งมุมมองไปทางขวา:
VAR CAMERA = ใหม่ Three.othographicCamera (-1,3,1.5, -1.5,1,10); camera.position.set (1,0,5);
เช่นเดียวกับการย้ายกล้องให้ถูกต้อง
4.4 เปลี่ยนมุมกล้อง
camera.position.set (4, -3,5); camera.lookat (ใหม่ Three.vector3 (0, 0, 0));
แต่ตอนนี้กล้องกำลังสังเกตไปตามทิศทางเชิงลบของแกน z ดังนั้นคิวบ์จึงไม่สามารถสังเกตได้มีเพียงชิ้นส่วนของสีดำเท่านั้น เราสามารถระบุทิศทางของต้นกำเนิดผ่านฟังก์ชั่น Lookat:
camera.lookat (ใหม่ Three.vector3 (0, 0, 0));
โปรดทราบว่าฟังก์ชั่น lookAt ยอมรับอินสแตนซ์ของ THREE.Vector3 อย่าเขียนเป็น camera.lookAt(0, 0, 0)
โอเคข้างต้นเป็นเนื้อหาทั้งหมดของสามการเรียนรู้กล้องถ่ายภาพมุมฉาก ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้สาม js บรรณาธิการจะอัปเดตบทความเกี่ยวกับสาม js หนึ่งหลังจากนั้นอีก โปรดดำเนินการต่อเพื่อให้ความสนใจกับ wulin.com