การแนะนำ
บทความนี้ส่วนใหญ่จะอธิบายแนวคิดที่เกี่ยวข้องของสาม.jsและช่วยให้ผู้อ่านพัฒนาความเข้าใจที่ค่อนข้างสมบูรณ์ของสาม.Jsและความรู้ที่เกี่ยวข้อง
เว็บได้พัฒนาอย่างรวดเร็วในช่วงไม่กี่ปีที่ผ่านมา ด้วยความนิยมของ HTML5 ความสามารถในการปฏิบัติงานของหน้าเว็บจึงมีประสิทธิภาพมากขึ้นเรื่อย ๆ มีภาพเคลื่อนไหวที่ซับซ้อนมากมายและเอฟเฟกต์ที่สวยงามบนหน้าเว็บ
แต่ผู้คนมักจะโลภ ดังนั้นมีอะไรอีกบ้างที่สามารถทำได้เหนือสิ่งนี้? หนึ่งในนั้นคือการวาดกราฟิก 3D ประสิทธิภาพสูงในหน้าเว็บผ่าน WebGL
opengl, webgl ถึงสาม js
หลายคนอาจเคยได้ยิน OpenGL ซึ่งเป็นห้องสมุดกราฟิกกราฟิกข้ามแพลตฟอร์มที่ใช้กันมากที่สุด
WebGL เป็นมาตรฐานกราฟิกที่มุ่งเน้นเว็บที่ออกแบบโดย OpenGL ซึ่งให้บริการชุด API JavaScript ซึ่งการแสดงผลกราฟิกจะได้รับการยกระดับเพื่อให้ได้ประสิทธิภาพที่สูงขึ้น
Three.js เป็นไลบรารีกราฟิกที่ใช้งานง่ายที่เกิดขึ้นจากการห่อหุ้มและทำให้อินเตอร์เฟส WebGL ง่ายขึ้น
เพื่อให้ง่าย: WebGL ถือได้ว่าเป็นอินเทอร์เฟซที่ได้รับจากเบราว์เซอร์ ใน JavaScript API เหล่านี้สามารถใช้โดยตรงเพื่อวาดกราฟิก 3 มิติ และสาม.jsช่วยให้เราห่อหุ้มอินเทอร์เฟซเหล่านี้ให้มีประโยชน์มากขึ้น
การเปรียบเทียบ webgl และ three.js
เนื่องจากเรามี webgl ทำไมเรายังต้องการสาม.js?
นี่เป็นเพราะเกณฑ์สำหรับ WebGL ค่อนข้างสูงและต้องการความรู้ทางคณิตศาสตร์ค่อนข้างมาก แม้ว่า WebGL จะมี API ส่วนหน้า แต่การพัฒนา WebGL และ Front-end นั้นเป็นสองทิศทางที่แตกต่างกันและมีความรู้ที่ทับซ้อนกันเล็กน้อย ความเกี่ยวข้องคือพวกเขาทั้งหมดอยู่บนแพลตฟอร์มเว็บและพวกเขาทั้งหมดใช้ JavaScript โปรแกรมเมอร์ส่วนหน้าอาจคุ้นเคยกับรูปทรงเรขาคณิตเชิงวิเคราะห์ แต่ควรมีน้อยมากที่ยังคงคุ้นเคยกับพีชคณิตเชิงเส้น (ตัวอย่างเช่นพยายามหาเมทริกซ์ผกผัน transpose?) ไม่ต้องพูดถึงว่าความสำคัญทางกายภาพของการดำเนินการเมทริกซ์
ดังนั้นจึงค่อนข้างยากสำหรับวิศวกรส่วนหน้าเพื่อเริ่มต้นกับ WebGL ในเวลาอันสั้น
ดังนั้นสาม js มีการห่อหุ้มส่วนต่อประสานที่ดีมากโดย WebGL ทำให้รายละเอียดมากมายง่ายขึ้นและลดค่าใช้จ่ายในการเรียนรู้อย่างมาก และมีการสูญเสียความยืดหยุ่นเพียงเล็กน้อยใน WebGL
ดังนั้นการเริ่มต้นด้วยสาม js จึงคุ้มค่าที่จะแนะนำซึ่งช่วยให้คุณเผชิญกับสถานการณ์ความต้องการส่วนใหญ่หลังจากการศึกษาที่สั้นลง
สามปัญหาการเรียนรู้
การเริ่มต้นใช้งาน Three.js ค่อนข้างง่าย แต่เมื่อเราเรียนรู้จริงๆเราจะพบปัญหาที่น่าอาย: มีสื่อการเรียนรู้ที่เกี่ยวข้องน้อยมาก
โดยปกติแล้วห้องสมุดยอดนิยมนี้จะมีเอกสารที่สมบูรณ์มากและมักจะเป็นวิธีที่ดีที่สุดในการเรียนรู้จากเอกสารอย่างเป็นทางการหรือบทเรียนเบื้องต้นอย่างเป็นทางการ แต่สามไม่ได้เป็นเอกสารของมันรัดกุมเกินไปสำหรับผู้เริ่มต้น
อย่างไรก็ตามอย่างเป็นทางการให้ตัวอย่างที่หลากหลายมากและการใช้งานเกือบทั้งหมดที่คุณต้องการนั้นสะท้อนให้เห็นในตัวอย่างที่แน่นอน แต่ตัวอย่างเหล่านี้ไม่เหมาะสำหรับการเริ่มต้น แต่เหมาะสำหรับการเรียนรู้เพิ่มเติมหลังจากเริ่มต้น
นี่คือบทเรียนที่ค่อนข้างดี:
สาม.JSการเริ่มต้นใช้งานคู่มือ
นี่เป็น บทช่วยสอนเบื้องต้นที่มีน้ำหนักเบา ที่ดีสำหรับ Three.js ผู้เขียนมีสไตล์การเขียนที่ดีมากและความรู้พื้นฐานได้รับการอธิบายอย่างรัดกุมและเข้าใจได้ง่าย
สามคู่มือการพัฒนา JS (เวอร์ชันภาษาจีนฉบับแรก)
เรียนรู้สาม.JS-ฉบับที่สอง
การเรียนรู้ Three.js: JavaScript 3D Library สำหรับ WebGL เป็นหนังสือเบื้องต้นไม่กี่เล่มและดีที่สุดของ Three.js ซึ่งอธิบายฟังก์ชั่นต่าง ๆ ของสาม.JSในวิธี ที่ครอบคลุม มากขึ้น
หากคุณมีความสามารถขอแนะนำให้อ่านรุ่นที่สองของเวอร์ชันภาษาอังกฤษที่เผยแพร่ในปี 2015 ซึ่งเล็กมากแตกต่างจาก Three.js ปัจจุบัน
เวอร์ชันภาษาจีนได้รับการแปลจากหนังสือเล่มแรกที่ตีพิมพ์ในปี 2012 แนวคิดส่วนใหญ่มีผลบังคับใช้ แต่รายละเอียดจำนวนมากมีการเปลี่ยนแปลง
สาม.JSการสอน
นี่คือการแปลของการสอนต่างประเทศโดยมีทั้งหมด หกบทความ ฉันไม่ได้อธิบายมากนัก แต่มันเกี่ยวกับวิธีการใช้ฟังก์ชั่นพื้นฐานแต่ละอย่างมากขึ้น เหมาะสำหรับนักเรียนที่มีรากฐานกราฟิก
แน่นอนว่าวัสดุเหล่านี้ไม่เพียงพอในระหว่างกระบวนการเรียนรู้จริง เมื่อพบปัญหาคุณยังต้องตรวจสอบวัสดุด้วยตัวเอง อย่างไรก็ตามฉันอยากจะเตือนคุณว่า Three.js ได้รับการอัปเดตบ่อยครั้งตอนนี้เป็นเวอร์ชัน R80 ตั้งแต่ R1 เปิดตัวในเดือนเมษายน 2010 นี่เป็นรุ่นที่ 72 (หมายเลขเวอร์ชันบางรุ่นที่อยู่ตรงกลางได้ถูกข้ามไป) ดังนั้นข้อมูลบางอย่างที่พบบนอินเทอร์เน็ตอาจ ไม่เหมาะสำหรับเวอร์ชันปัจจุบัน ดังนั้นคุณต้องให้ความสนใจกับการระบุตัวตน (ข้อมูลที่แนะนำก่อนหน้านี้ยังมีปัญหาดังกล่าวมากหรือน้อย)
แนวคิดบางอย่างในสาม js
ในการแสดงกราฟิก 3 มิติบนหน้าจอความคิดโดยทั่วไปจะเป็นเช่นนี้:
สร้างพื้นที่สามมิติ
ในสามมันเรียกว่า ฉาก (ฉาก) เพื่อเลือกจุดสังเกตและกำหนดทิศทางการสังเกต/มุม ฯลฯ
สามเรียกว่า กล้อง (กล้อง) เพื่อเพิ่มวัตถุสำหรับการสังเกตไปยังฉาก
มีวัตถุหลายประเภทในสามประเภทรวมถึงตาข่ายเส้นคะแนน ฯลฯ พวกมันทั้งหมดสืบทอดมาจากคลาส Object3D ทำให้ฉากที่สังเกตได้ไปยังพื้นที่ที่ระบุบนหน้าจอ
ใช้ renderer ในสามเพื่อทำสิ่งนี้
มาดูแนวคิดเหล่านี้ในรายละเอียดสามอย่าง
ฉาก
ฉากนี้เป็นภาชนะของวัตถุทั้งหมดและมันก็สอดคล้องกับโลกสามมิติที่เราสร้างขึ้น
ระบบพิกัดกล้อง
กล้องเป็นผู้สังเกตการณ์ในโลกสามมิติ เพื่อที่จะสังเกตโลกนี้เราต้องอธิบายตำแหน่งในอวกาศก่อน
ระบบพิกัดมือขวาทั่วไปใช้ในสาม
การฉายภาพสามมิติ
มีกล้องสองประเภทในสามประเภทคือกล้องฉายภาพ orthographic สามกล้องถ่ายภาพและกล้องการฉายมุมมองสามกล้อง
ความแตกต่างระหว่างการฉายมุมฉากและการฉายมุมมองแสดงในรูปด้านบน ภาพด้านซ้ายคือการฉายมุมฉาก แสงที่ปล่อยออกมาจากวัตถุจะถูกฉายขนานกับหน้าจอและสี่เหลี่ยมที่อยู่ไกลและใกล้มีขนาดเท่ากัน ภาพที่ถูกต้องคือการฉายมุมมองซึ่งมีขนาดใหญ่ทั้งในบริเวณใกล้และเล็กในไกลและเล็กซึ่งสอดคล้องกับความรู้สึกตามปกติของเราในการมองสิ่งต่าง ๆ
Wikipedia: การฉายภาพ 3D
กล้องถ่ายภาพมุมฉาก
หมายเหตุ: "มุมมอง" ในรูปที่สอดคล้องกับกล้องในสาม
ที่นี่เราเพิ่มแนวคิดของร่างกายที่มองเห็นได้: ร่างกายภาพเป็นร่างกายทางเรขาคณิตวัตถุเฉพาะในร่างกายที่มองเห็นจะมองเห็นได้และวัตถุที่อยู่นอกร่างกายภาพจะถูกตัดออก นี่คือการลบการดำเนินการที่ไม่จำเป็น
มุมมองร่างกายของกล้องฉายภาพ orthographic เป็นลูกบาศก์ ตัวสร้างของ OrthographicCamera มีดังนี้: OrthographicCamera (ซ้าย, ขวา, บน, ล่าง, ใกล้, ใกล้, ไกล)
ตัวกล้องเองสามารถถือได้ว่าเป็นจุดในขณะที่ซ้ายแสดงระยะห่างระหว่างระนาบซ้ายและกล้องในทิศทางซ้ายและขวา เช่นเดียวกับพารามิเตอร์อื่น ๆ ดังนั้นพารามิเตอร์ทั้งหกจะกำหนดตำแหน่งของใบหน้าทั้งหกของร่างกายที่ดูตามลำดับ
อาจสันนิษฐานได้ว่าวัตถุในตัวดูจะถูกฉายขนานกับระนาบใกล้และจากนั้นภาพบนระนาบใกล้จะถูกแสดงบนหน้าจอ
กล้องฉายมุมมอง
การดูตัวกล้องของการฉายมุมมองเป็นแพลตฟอร์มสี่ขอบและตัวสร้างของมันมีดังนี้: PerspectiveCamera (FOV, แง่มุม, ใกล้, ไกล, ไกล)
FOV สอดคล้องกับมุมมองในรูปซึ่งเป็นมุมระหว่างด้านบนและด้านล่าง แง่มุมคืออัตราส่วนมุมมองของระนาบใกล้ การเพิ่มระยะทางใกล้กับระนาบใกล้และระยะไกลไกลออกไปไกลวิธีเดียวที่จะกำหนดฉากภาพ
กล้องการฉายมุมมองมีความสอดคล้องกับความรู้สึกตามปกติของเราในการดูสิ่งต่าง ๆ ดังนั้นในกรณีส่วนใหญ่เราใช้กล้องการฉายมุมมองเพื่อแสดงเอฟเฟกต์ 3 มิติ
วัตถุ
ด้วยกล้องคุณต้องดูบางสิ่งใช่มั้ย เพิ่มวัตถุบางอย่างในฉาก
มีวัตถุมากมายสำหรับการแสดงผลในสามชิ้นซึ่งทั้งหมดมาจากคลาส Object3D ที่นี่เราดูตาข่ายและคะแนนเป็นหลัก
ตาข่าย
เราทุกคนรู้ว่าในโลกคอมพิวเตอร์อาร์คเชื่อมต่อกันด้วยส่วนเส้น จำกัด ประกอบด้วยจุด จำกัด เมื่อมีหลายบรรทัดดูเหมือนว่าส่วนโค้งที่ราบรื่น
โมเดลสามมิติในคอมพิวเตอร์มีความคล้ายคลึงกัน การปฏิบัติทั่วไปคือการอธิบายโดยใช้กริดของสามเหลี่ยม เราเรียกโมเดลนี้โมเดลตาข่าย
นี่คือกระต่ายสแตนฟอร์ดที่มีชื่อเสียง ตำแหน่งในกราฟิก 3 มิตินั้นคล้ายกับของ Lena ซึ่งเป็นเขตข้อมูลที่รู้จักกันดีของการประมวลผลภาพดิจิตอล
ดูกระต่ายนี้พื้นผิวของมันจะนุ่มนวลขึ้น/แม่นยำเมื่อจำนวนสามเหลี่ยมเพิ่มขึ้น
ในสามตัวสร้างของตาข่ายมีดังนี้: ตาข่าย (เรขาคณิตวัสดุ)
รูปทรงเรขาคณิตเป็นรูปร่างวัสดุเป็นวัสดุ
ไม่เพียง แต่ตาข่ายคุณสมบัติทั้งสองนี้ใช้เพื่อสร้างวัตถุจำนวนมาก มาดูคุณลักษณะที่สำคัญสองอย่างนี้กันเถอะ
เรขาคณิต
เรขาคณิตรูปร่างค่อนข้างใช้งานง่าย เรขาคณิตใช้แบบจำลองเพื่อจัดเก็บชุดของจุดและความสัมพันธ์ระหว่างคะแนน (ซึ่งจุดเป็นรูปสามเหลี่ยม) เพื่อให้บรรลุวัตถุประสงค์ในการอธิบายรูปร่างของวัตถุ
สามมีรูปร่างพื้นฐานมากมายเช่นลูกบาศก์ (จริง ๆ แล้วลูกบาศก์), ระนาบ (จริง ๆ แล้วสี่เหลี่ยม), ทรงกลม, วงกลม, กระบอกสูบและโต๊ะกลม;
นอกจากนี้คุณยังสามารถสร้างรูปร่างได้โดยกำหนดตำแหน่งของแต่ละจุดด้วยตัวเอง
สำหรับรูปร่างที่ซับซ้อนมากขึ้นเรายังสามารถนำเข้าผ่านไฟล์โมเดลภายนอก
วัสดุ
วัสดุวัสดุสิ่งนี้ไม่ได้ใช้งานง่ายเท่ากับรูปร่าง
วัสดุเป็นชุดของคุณสมบัติที่มองเห็นได้ทั้งหมดยกเว้นรูปร่างของพื้นผิววัตถุเช่นสีพื้นผิวความเรียบความโปร่งใสการสะท้อนแสงดัชนีการหักเหของแสงและความส่องสว่าง
ที่นี่เราจะพูดถึงความสัมพันธ์ระหว่างวัสดุแผนที่และพื้นผิว
วัสดุได้รับการกล่าวถึงข้างต้นและมีแผนที่และอื่น ๆ
สติกเกอร์เป็น 'วาง' และ 'วาง' ซึ่งรวมถึงรูปภาพและสถานที่ควรโพสต์รูปภาพ
สำหรับพื้นผิวมันเป็น 'รูปภาพ' จริง ๆ
สามข้อเสนอวัสดุที่หลากหลายให้เลือกและสามารถเลือกการสะท้อนแบบกระจาย/specular และวัสดุอื่น ๆ ได้อย่างอิสระ
คะแนน
หลังจากพูดถึงตาข่ายลองดูที่วัตถุอื่น - คะแนน
คะแนนเป็นคอลเลกชันของพวงคะแนน มันถูกเรียกว่า Particlesystem มานานก่อน มันถูกเปลี่ยนชื่อ PointCloud ในเวอร์ชัน R68 และถูกเปลี่ยนชื่อเป็นคะแนนในเวอร์ชัน R72 การเปลี่ยนชื่อส่วนใหญ่เป็นเพราะ Mr.Doob เชื่อว่าระบบอนุภาคควรเป็นระบบที่สมบูรณ์ซึ่งรวมถึงการประมวลผลของอนุภาคและคุณสมบัติทางกายภาพที่เกี่ยวข้องในขณะที่คะแนนในสามนั้นง่ายกว่ามาก ดังนั้นในที่สุดคลาสนี้จึงมีชื่อ
เอฟเฟกต์ทั่วไปที่สามารถใช้คะแนนได้คือ: ตัวอย่างอย่างเป็นทางการ
แสงสว่าง
พระเจ้าตรัสว่า: ต้องมีแสงสว่าง!
เอฟเฟกต์แสงและเงาเป็นปัจจัยสำคัญที่ทำให้ภาพเพิ่มคุณค่า
สามให้ความหลากหลายของแหล่งกำเนิดแสงรวมถึงแสงโดยรอบแสงไฟจุดกำเนิดแสงจุดจุดจุดสปอตไลท์สปอตไลท์ทิศทางแสงทิศทางแสงไฟซีกโลกแสงซีกโลกและแสงอื่น ๆ
เพียงเพิ่มแหล่งกำเนิดแสงที่ต้องการในฉาก
ผู้แสดงผล
วัตถุต่าง ๆ ถูกสร้างขึ้นในฉากแสงและกล้องที่สังเกตวัตถุมันเป็นเวลาที่จะทำให้สิ่งที่คุณเห็นบนหน้าจอ นั่นคือสิ่งที่ Render ทำ
Renderer ผูกวัตถุ Canvas และสามารถตั้งค่าคุณสมบัติเช่นขนาดสีพื้นหลังเริ่มต้น ฯลฯ
เรียกฟังก์ชั่นการเรนเดอร์ของเรนเดอร์ผ่านฉากและกล้องและคุณสามารถแสดงภาพลงในผืนผ้าใบได้
ทำให้ภาพเคลื่อนไหว
ตอนนี้สามารถรับภาพคงที่มันจะย้ายได้อย่างไร?
ความคิดที่ง่ายมากคือการเปลี่ยนตำแหน่งมุมและคุณสมบัติต่าง ๆ ของวัตถุในฉากจากนั้นเรียกใช้ฟังก์ชันเรนเดอร์เพื่อแสดงผล
ดังนั้นคุณจะกำหนดเวลาของการแสดงผลอีกครั้งได้อย่างไร?
HTML5 ให้เราด้วยการร้องขอ Frame ซึ่งเรียกฟังก์ชันที่ผ่านมาโดยอัตโนมัติก่อนที่จะทาสีใหม่แต่ละหน้า
ถ้าเราแสดงสิ่งนี้ในตอนแรก:
function render () {renderer.render (ฉาก, กล้อง);}เพียงแค่เปลี่ยนเป็นสิ่งนี้:
ฟังก์ชั่น render () {requestimationFrame (render); Object.position.x += 1; renderer.render (ฉาก, กล้อง);}วัตถุสามารถเคลื่อนที่ได้!
ให้เกาลัด
มาใช้ตัวอย่างง่ายๆเพื่อจัดเรียงกระบวนการนี้กันเถอะ
ก่อนอื่นให้เขียนหน้าด้วยองค์ประกอบผ้าใบ
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> cube </title> <script src = "http://sqimg.qq.com/qq_product_operations/ma/javanli_test/lib/three.min.min.min.min.min.min.min.min.min.min.min.min.min html, body {margin: 0; Padding: 0; } #THREE_CANVAS {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100%; ความสูง: 100%; } </style> </head> <body> <canvas id = "threa_canvas"> </canvas> </body> </html>มาทำส่วน JavaScript ด้านล่าง
ครั้งแรกที่เริ่มต้น Renderer
ฟังก์ชั่น initrenderer () {width = document.getElementById ('สาม _canvas'). clientWidth; ความสูง = document.getElementById ('three_canvas'). clientheight; renderer = ใหม่ three.webglrenderer ({// bind canvas to renderer canvas: document.getElementById ('three_canvas')}); renderer.setsize (ความกว้างความสูง); // ตั้งค่าขนาดการเรนเดอร์เป็นเดียวกับ canvas renderer.setClearColor (0xffffff, 1.0); // ตั้งค่าสีและความโปร่งใสเริ่มต้น}สถานการณ์การเริ่มต้น:
ฟังก์ชั่น initscene () {scene = new Three.scene ();}เริ่มต้นกล้อง:
ฟังก์ชั่น initcamera () {// กล้องฉายภาพมุมฉากง่าย ๆ หันหน้าไปทางศูนย์กลางของวิวพอร์ตขนาดของวิวพอร์ตเท่ากับขนาดผ้าใบ กล้อง = ใหม่ Three.othographicCamera (ความกว้าง / -2, ความกว้าง / 2, ความสูง / 2, ความสูง / -2, 1, 1,000); // ตั้งค่ากล้องตำแหน่งกล้อง position.x = 0; camera.position.y = 0; camera.position.z = 200; // ตั้งค่ากล้องในทิศทางขึ้นของกล้อง up.x = 0; camera.up.y = 1; camera.up.z = 0; // ตั้งค่าตำแหน่งโฟกัสของกล้อง (จริง ๆ แล้วเพื่อกำหนดทิศทาง) camera.lookat ({x: 0, y: 0, z: 0});}ในการกำหนดตำแหน่งและทิศทางของกล้องโดยไม่ซ้ำกันคุณลักษณะทั้งสามของตำแหน่งขึ้นและดูเป็นสิ่งที่ขาดไม่ได้
ที่นี่เราได้สร้างกล้องฉายมุมฉาก ที่นี่ฉันรักษาขนาดมุมมองที่สอดคล้องกับความละเอียดของหน้าจอเพื่อความสะดวกเพื่อให้ความยาวของหน่วยในระบบพิกัดสอดคล้องกับพิกเซลของหน้าจอ
เราวางกล้องไว้บนแกน Z หันหน้าไปทางที่มาของพิกัดและทิศทางบนของกล้องคือแกน y โปรดทราบว่าทิศทางของการขึ้นและทิศทางของ Lookat จะต้องตั้งฉาก (คุณจะรู้ว่าคุณเปรียบเทียบตัวเองกับหัวของคุณเอง)
นี่คือคิวบ์ที่เพิ่มเข้ามาในฉาก:
ฟังก์ชั่น initObject () {// สร้างลูกบาศก์ที่มีความยาวด้านข้างของ 100 var geometry = ใหม่สาม cubegeometry (100, 100, 100); Object = new Three.Mesh (รูปทรงเรขาคณิต, ใหม่ Three.MeshnormalMaterial ()); scene.add (วัตถุ);}โปรดทราบว่าเราใช้ วัสดุปกติ meshnormalmaterial เพื่อให้สีของแต่ละใบหน้าของลูกบาศก์นั้นเกี่ยวข้องกับทิศทางที่หันหน้าไปทางใบหน้านี้ทำให้ง่ายต่อการสังเกต/ดีบัก
ในการสาธิตอย่างง่ายนี้ฉันไม่ได้วางแผนที่จะเพิ่มเอฟเฟกต์แสงและเงาและวัสดุปกติไม่ตอบสนองต่อแสง
ในที่สุดสร้างวงภาพเคลื่อนไหว
ฟังก์ชั่น render () {requestimationFrame (render); Object.rotation.x += 0.05; Object.Rotation.y += 0.05; renderer.render (ฉาก, กล้อง);}การทาสีใหม่แต่ละครั้งทำให้ลูกบาศก์หมุนเล็กน้อย
เมื่อหน้ากำลังโหลดเพียงโทรหาฟังก์ชั่นก่อนหน้า
ฟังก์ชั่น threestart () {initrenderer (); initcamera (); Initscene (); initobject (); render ();} window.onload = threestart ();การสาธิตที่สมบูรณ์มีลักษณะเช่นนี้:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> cube </title> <script src = "http://sqimg.qq.com/qq_product_operations/ma/javanli_test/lib/three.min.min.min.min.min.min.min.min.min.min.min.min.min html, body {margin: 0; Padding: 0; } #THREE_CANVAS {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100%; ความสูง: 100%; } </style> </head> <body> <canvas id = "threa_canvas"> </canvas> <script> var renderer, กล้อง, ฉาก, แสง, วัตถุ, วัตถุ; ความกว้าง var, ความสูง; ฟังก์ชั่น initrenderer () {width = document.getElementById ('สาม _canvas'). clientWidth; ความสูง = document.getElementById ('three_canvas'). clientheight; renderer = ใหม่ three.webglrenderer ({canvas: document.getElementById ('สาม _canvas')}); renderer.setsize (ความกว้างความสูง); render.setClearColor (0xfffff, 1.0); } function initcamera () {camera = new Three.othographicCamera (ความกว้าง / -2, ความกว้าง / 2, ความสูง / 2, ความสูง / -2, 1, 1000); camera.position.x = 0; camera.position.y = 0; camera.position.z = 200; camera.up.x = 0; camera.up.y = 1; camera.up.z = 0; camera.lookat ({x: 0, y: 0, z: 0}); } ฟังก์ชั่น initscene () {scene = new three.scene (); } function initObject () {var geometry = ใหม่สาม cubegeometry (100, 100, 100); Object = new Three.Mesh (รูปทรงเรขาคณิต, ใหม่ Three.MeshnormalMaterial ()); scene.add (วัตถุ); } function render () {requestanimationframe (render); Object.rotation.x += 0.05; Object.Rotation.y += 0.05; renderer.render (ฉาก, กล้อง); } ฟังก์ชั่น threestart () {initrenderer (); initcamera (); Initscene (); initobject (); render (); } window.onload = threestart (); </script> </body> </html>หลังจากบันทึกเป็น HTML ให้เปิดมันลูกบาศก์หมุนดังกล่าวจะปรากฏขึ้นที่กึ่งกลางของหน้าจอ
สรุป
นั่นคือทั้งหมดสำหรับการแนะนำของสาม.js บทความนี้กล่าวถึงองค์ประกอบที่สำคัญในสาม ในความเป็นจริงมีหลายสิ่งที่ฉันต้องการสรุป แต่การเขียนพวกเขาในบทความนี้อาจดูยุ่งยาก ความตั้งใจดั้งเดิมของบทความนี้คือการให้ผู้อ่านมีความเข้าใจที่เข้าใจง่ายและทั่วไปเกี่ยวกับสาม.jsหลังจากอ่านและไม่ได้ตั้งใจจะเกี่ยวข้องกับรายละเอียดมากเกินไป
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น