Three.js เป็นเครื่องยนต์ 3 มิติที่ทำงานในเบราว์เซอร์ คุณสามารถใช้มันเพื่อสร้างฉากสามมิติต่างๆรวมถึงกล้องแสงและเงาวัสดุและวัตถุอื่น ๆ คุณสามารถเห็นการสาธิตที่ยอดเยี่ยมมากมายในหน้าแรก อย่างไรก็ตามเครื่องยนต์นี้ยังอยู่ในขั้นตอนการพัฒนาที่ยังไม่บรรลุนิติภาวะ API ที่ไม่เพียงพอและการขาดเอกสารได้เพิ่มความยากลำบากในการเรียนรู้สำหรับผู้เริ่มต้น (โดยเฉพาะอย่างยิ่งการขาดเอกสาร) รหัสสาม.JSโฮสต์บน GitHub
http://github.com/mrdoob/three.js/
ลองดูตัวอย่าง
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> </head> <script type = "text/javascript" src = "js/three.js"> </script> <style> div#canvas-frame เคอร์เซอร์: ตัวชี้; ความกว้าง: 100%; ความสูง: 600px; พื้นหลังสี: #eeeeee; } </style> <script> var renderer; function initthree () {width = document.getElementById ('Canvas-frame'). clientWidth; ความสูง = document.getElementById ('Canvas-Frame'). clientHeight; // ตัวแสดงผลกำหนดผลการแสดงผลและองค์ประกอบใดที่ควรวาดบนหน้าและวิธีการวาด renderer = ใหม่สาม.webglrenderer ({antialias: true}); renderer.setsize (ความกว้างความสูง); // domelement แสดงถึงผืนผ้าใบใน Renderer และการเรนเดอร์ทั้งหมดจะถูกวาดบน document.getElementById ('Canvas-Frame') ภาคผนวก (renderer.Domelement); render.setClearColor (0xfffff, 1.0); } // กล้องมุมมองกล้อง VAR กล้อง; ฟังก์ชั่น initcamera () {camera = ใหม่สาม perspectiveCamera (45, ความกว้าง/ความสูง, 1,10000); camera.position.x = 0; camera.position.y = 1,000; camera.position.z = 0; camera.up.y = 0; camera.up.y = 0; camera.up.z = 1; camera.lookat ({x: 0, y: 0, z: 0}); } // ฉาก var ฉาก; ฟังก์ชั่น initscene () {scene = new Three.scene (); } // แสง var แสง; ฟังก์ชั่น initlight () {light = new Three.DirectionAllight (0xff0000, 1.0, 0); Light.position.set (100, 100, 200); scene.add (เบา); } // เรขาคณิต var cube; ฟังก์ชั่น initObject () {// เรขาคณิตที่ประกาศมีพารามิเตอร์จุดยอดที่สามารถใช้ในการจัดเก็บจุด var geometry = ใหม่ Three.Geometry (); // linebasicmaterial (พารามิเตอร์) // การแปลขั้นพื้นฐาน: พื้นฐาน // การแปลวัสดุ: วัตถุดิบ // พารามิเตอร์: เป็นวัตถุที่กำหนดลักษณะที่ปรากฏของวัสดุ มันมีหลายคุณลักษณะเพื่อกำหนดวัสดุ แอตทริบิวต์เหล่านี้คือ // การแปล: พารามิเตอร์ // สี: สีของบรรทัดแสดงใน hexadecimal และสีเริ่มต้นเป็นสีขาว // linewidth // linecap: การปรากฏตัวของปลายทั้งสองของเส้นคือจุดสิ้นสุดแบบโค้งมนโดยค่าเริ่มต้น เอฟเฟกต์สามารถมองเห็นได้เมื่อเส้นหนาขึ้นเท่านั้น // การแปล CAP: HAT // LINEJOIN: การปรากฏตัวของจุดเชื่อมต่อระหว่างสองบรรทัดมุมโค้งมนโดยค่าเริ่มต้น // เข้าร่วมการแปล: เพิ่ม // VertexColors: กำหนดว่าวัสดุบรรทัดใช้องค์ประกอบจุดยอดหรือไม่นี่เป็นค่าบูลีน หมายความว่าสีของแต่ละส่วนของเส้นจะถูกแก้ไขตามสีของจุดสุดยอด // การแปลจุดสุดยอด: จุดสุดยอด // หมอก: กำหนดว่าสีของวัสดุได้รับผลกระทบจากเอฟเฟกต์หมอกทั่วโลกหรือไม่ // การแปล: หมอกวัสดุ VAR = ใหม่ three.lineBasicMaterial ({vertexColors: true}); // กำหนดสองสีที่เป็นสีของจุดปลายสองจุด var color1 = ใหม่สามสี (0x4444444), color2 = ใหม่สามสี (0xff0000); // วัสดุของบรรทัดสามารถกำหนดได้โดยสีของสองจุด var p1 = ใหม่ three.vector3 (); var p2 = ใหม่ three.vector3 (); P1.Set (-100,0,100); P2.Set (100,0, -100); Geometry.vertices.push (P1); Geometry.vertices.push (P2); Geometry.colors.push (color1, color2); // กำหนดบรรทัดและพารามิเตอร์สามตัวจะถูกส่งผ่านที่นี่ // ครั้งแรกคือเรขาคณิตเรขาคณิตซึ่งมีสองจุดยอดและสีจุดสุดยอด // ที่สองคือวัสดุของบรรทัด // ที่สามคือวิธีการเชื่อมต่อของกลุ่มจุด var = ใหม่สามไลน์ (เรขาคณิตวัสดุสาม // เพิ่มบรรทัดในฉาก ADD (บรรทัด); } ฟังก์ชั่น threestart () {initthree (); initcamera (); Initscene (); initlight (); initobject (); renderer.clear (); renderer.render (ฉาก, กล้อง); } </script> <body onload = "threestart ()"> <div id = "canvas-frame"> </div> </body> </html>ฉันหวังว่าตัวอย่างนี้จะช่วยให้คุณเรียนรู้สาม js