เราได้เห็นว่ามันเหนื่อยแค่ไหนที่จะใช้การพัฒนา WebGL API ดั้งเดิม ด้วยเหตุนี้จึงมีการพัฒนาเฟรมเวิร์ก WebGL จำนวนมาก ด้วยเฟรมเวิร์กเหล่านี้คุณสามารถสร้างฉาก 3 มิติที่ต้องการได้อย่างรวดเร็ว เฟรมเวิร์กเหล่านี้ห่อหุ้มองค์ประกอบต่าง ๆ ของการสร้างฉาก 3 มิติให้มีองศาที่แตกต่างกันเช่นฉากกล้องโมเดลแสงไฟวัสดุ ฯลฯ ; การใช้วัตถุที่ห่อหุ้มเหล่านี้คุณสามารถสร้างฉาก 3 มิติที่ต้องการได้อย่างง่ายดายเพื่อให้คุณต้องมุ่งเน้นพลังงานมากขึ้นในตรรกะ
ในปัจจุบันไม่มีใครมีข้อได้เปรียบของกรอบอื่น ๆ ที่ครอบงำ เฟรมประเภทใดที่จะเลือกขึ้นอยู่กับความชอบส่วนตัวของคุณ อย่างไรก็ตามเมื่อเลือกเฟรมเวิร์กฉันคิดว่าเป็นการดีกว่าที่จะดูเวลาอัปเดตครั้งสุดท้ายของเฟรมเวิร์ก การเลือกเฟรมเวิร์กอัปเดตที่เสถียรสามารถใช้คุณสมบัติล่าสุดและทำให้โปรแกรมของคุณมีเสถียรภาพมากขึ้น
ตัวอย่างต่อไปนี้ใช้เฟรมเวิร์กสาม.JSสำหรับการพัฒนา
Three.js เป็นเฟรมเวิร์กโอเพ่นซอร์สที่ค่อนข้างครอบคลุมซึ่งได้รับการห่อหุ้มด้วยองค์ประกอบต่าง ๆ ของฉาก 3 มิติ คุณสามารถใช้เพื่อสร้างกล้องโมเดลแสงวัสดุและอื่น ๆ ได้อย่างง่ายดาย คุณยังสามารถเลือกเรนเดอร์ที่แตกต่างกัน Three.js มีวิธีการเรนเดอร์ที่หลากหลาย คุณสามารถเลือกใช้ผ้าใบเพื่อแสดงผลหรือใช้ WebGL หรือ SVG เพื่อแสดงผล
นอกจากนี้ Three.js สามารถโหลดไฟล์ 3D ในหลายรูปแบบและไฟล์โมเดลของคุณอาจมาจากเครื่องปั่น, Maya, Chinema4d, 3dmax ฯลฯ และมีสิ่งพื้นฐานที่ค่อนข้างสร้างขึ้น: ทรงกลม (ทรงกลม) เครื่องบิน (เครื่องบิน) ลูกบาศก์ (ลูกบาศก์) Three.js สร้างวัตถุเหล่านี้ได้อย่างง่ายดายมาก
ตกลงอย่าพูดเรื่องไร้สาระเพียงแค่ดูรหัส:
<! doctype html>
<html>
<head>
<title> thirojsdemo </title>
<meta charset = "utf-8">
<style>
ร่างกาย
-
มาร์จิ้น: 0px;
พื้นหลังสี:#B0B0B0;
โอเวอร์โหลด: ซ่อน;
-
</style>
</head>
<body>
<script src = "three.js"> </script>
<script>
กล้อง var, ฉาก, Renderer;
var mesh;
init ();
เคลื่อนไหว ();
ฟังก์ชัน init () {
scene = new Three.scene ();
กล้อง = ใหม่สาม PerspectiveCamera (70, Window.innerWidth /window.innerHeight,1,1000);
camera.position.z = 400;
scene.add (กล้อง);
รูปทรงเรขาคณิต = ใหม่สามคิวบิกเมทรี (200,200,200);
วัสดุ = ใหม่สาม meshbasicmaterial ({color: 0xff0000, wireframe: true});
mesh = ใหม่สามเม. (เรขาคณิตวัสดุ);
scene.add (ตาข่าย);
renderer = ใหม่สาม.webglrenderer ();
renderer.setsize (window.innerWidth, window.innerHeight);
document.body.appendchild (renderer.domelement);
-
ฟังก์ชั่น animate () {
RequestAnimationFrame (เคลื่อนไหว);
mesh.rotation.x += 0.05;
mesh.rotation.y += 0.05;
renderer.render (ฉาก, กล้อง);
-
</script>
</body>
</html>
นี่คือรหัสทั้งหมดเมื่อเทียบกับรหัสก่อนหน้าโดยใช้ WebGL API นี่เป็นเรื่องง่ายเกินไป
รหัสใช้งานง่ายมากเพียงไม่กี่ขั้นตอน:
1. สร้างฉากฉาก
2. สร้างกล้องกล้อง
3. สร้าง/โหลดรูปทรงเรขาคณิต
4. โหลดวัสดุวัสดุ
5. แสดงตาข่ายวัตถุแบบจำลอง (ประกอบด้วยเรขาคณิตและวัสดุ)
6. เปิดใช้งานแอนิเมชั่น
นี่คือคุณสมบัติที่จัดทำโดยแต่ละเฟรมเวิร์ก การใช้เฟรมเวิร์กที่แตกต่างกันนั้นเหมือนกันยกเว้นว่าชื่อฟังก์ชันอาจแตกต่างกัน การอ้างอิงต่อไปนี้แสดงรายการเอกสารการเรียนรู้กรอบการทำงานมากมายคุณสามารถเลือกได้หลายวิธีในการเรียนรู้
เกี่ยวกับข้อมูลโมเดลฉันอยากจะพูดสิ่งหนึ่งเพราะ JSON นั้นสั้นและกระชับมันเหมาะสำหรับการส่งเครือข่าย ในอนาคตมันอาจกลายเป็นรูปแบบข้อมูลโมเดลที่เหมาะสมที่สุดสำหรับ WebGL, เฟรมเวิร์กจำนวนมากได้เริ่มสนับสนุนข้อมูลโมเดลในรูปแบบ JSON
การอ้างอิงเชิงปฏิบัติ:ศูนย์พัฒนา: https://developer.mozilla.org/en/webgl
เครื่องมือพัฒนาออนไลน์พรีเมี่ยม: http://webglplayground.net/
บทเรียนพื้นฐานสำหรับเฟรมเวิร์กต่างๆ: http: //www.html5/ "> html5china.com/html5features/webgl/
การสอนภาษาจีน WebGL: http://www.hiwebgl.com/?p=42
การสอนภาษาจีน oak3d: http://www.hiwebgl.com/?cat=57
CubicVR3D เว็บไซต์ทางการ: http://www.cubicvr.org/
Three.js กราฟิกไลบรารี: https://github.com/mrdoob/three.js
การรวบรวมโพสต์สำหรับเฟรมเวิร์กต่างๆ: http://www.appcrews.com/2011/07/129.html