10 ตัวอย่างโอเพ่นซอร์สที่น่าทึ่งของ Three.js ในการดำเนินการ

อาจดูบ้าๆบอๆ แต่จริงๆ แล้วคุณสามารถสร้างวัตถุ 3 มิติด้วย JavaScript ได้ นักพัฒนาเว็บส่วนใหญ่พึ่งพาไลบรารี่อย่าง Three.js เพื่อทำสิ่งนี้ให้สำเร็จ

แต่เป็นกระบวนการที่มีรายละเอียดมากจนทุกคนไม่สนใจที่จะตรวจสอบ ตอนนี้ หากคุณอยากรู้เกี่ยวกับ 3D JS วิธีที่ดีที่สุดในการเรียนรู้คือการศึกษาผู้อื่น นั่นเป็นเหตุผลที่ฉันสร้างแกลเลอรีนี้

นี่คือโครงการ Three.js ที่ดีที่สุดบางส่วนที่ฉันสามารถหาได้ซึ่งโฮสต์บน CodePen พวกมันมีสไตล์และลักษณะที่แตกต่างกันมากมายที่จะช่วยให้คุณขับเคลื่อนความคิดสร้างสรรค์ของคุณ

1. ดินโพลีต่ำ

ด้วยองค์ประกอบ HTML เดียวและ CSS/JS ไม่กี่สิบบรรทัด เรามีโพลีเอิร์ธต่ำโดยนักพัฒนา Sam Saccone

มันอาจจะดูไม่เยอะในตอนแรก แต่มันเป็นหนึ่งในแนวคิดที่โดดเด่นกว่าที่ฉันเคยเห็น และมันก็ใช้เอฟเฟกต์แอนิเมชั่นแบบกำหนดเองด้วย ผืนดินยังโผล่ขึ้นมาจากพื้นโลก ทำให้ดูสมจริงยิ่งขึ้น

ใครก็ตามที่เคยใช้ Three.js มาก่อนน่าจะรู้ว่ามันยอดเยี่ยมขนาดไหน

แน่นอนว่ามันเป็นการก้าวไปข้างหน้าของโปรเจ็กต์ที่คล้ายคลึงกัน – ส่วนใหญ่สำหรับ codebase ที่เล็กกว่า

2. ทรงกลม

โครงการคล้ายดาวเคราะห์ที่แปลกประหลาดนี้ใช้ Three.js ด้วยเอฟเฟกต์ที่ค่อนข้างประณีต Spheres ทำงานบนตัวประมวลผลล่วงหน้าของ Stylus ซึ่งคุณสามารถเห็นการนำเข้าไปยัง CSS

นอกจากนี้ยังทำงานโดยไม่มี HTML ซึ่งทำให้เป็นภาพที่เห็นได้อย่างแท้จริง มันคือ JS ทั้งหมด 3D ทั้งหมด และทำงานได้อย่างสมบูรณ์แบบในเบราว์เซอร์สมัยใหม่ทุกตัว

ทรงกลมที่เล็กกว่าจะร่อนเหนือออร์บที่ใหญ่กว่าโดยใช้ฟังก์ชันทางเรขาคณิตจากไลบรารี JS ดูเหมือนบ้าที่สิ่งนี้จะเป็นไปได้ แต่มันก็เป็นเครื่องพิสูจน์ว่าเราได้ใช้ CSS มาไกลแค่ไหนแล้ว

3. การหมุนของดาวเคราะห์

เมื่อเข้าสู่แนวคิดดาวเคราะห์น้อย เรามีกาแล็กซีหมุนที่บ้าคลั่งซึ่งสร้างขึ้นโดยผู้พัฒนาไบรอัน โจนส์

นอกจากนี้ยังใช้แต่ Three.js และ CSS พื้นฐานบางส่วนในการจัดรูปแบบและจัดระเบียบดาวเคราะห์ ฉันต้องบอกว่าเอฟเฟกต์ 3D นั้นน่าประหลาดใจ ฉันยังไม่สามารถคาดเดาได้ว่าสิ่งนี้เป็นไปได้ในเว็บเบราว์เซอร์ทั่วไป!

แต่ปฏิเสธไม่ได้ว่าข้อมูลโค้ด CodePen นี้เป็นผู้ช่วยในการศึกษาที่ดี หากคุณเพิ่งเริ่มต้นในดินแดน Three.js

4. โลโก้บ้านต้นไม้ใน Three.js

Treehouse แหล่งข้อมูลการเรียนรู้ออนไลน์นั้นยอดเยี่ยมมาก โดยเฉพาะสำหรับมือใหม่ Nick Pettit หนึ่งในผู้สอนของพวกเขา ได้สร้างโลโก้ Treehouse แบบเต็มโดยใช้ Three.js

และบอกเลยว่างานนี้เด็ด! ฉันไม่เคยเห็นการตั้งค่าแบบนี้มาก่อนและไม่ค่อยเห็นปากกาที่มีความคิดเห็นโดยละเอียดเช่นนี้ รหัสของ Nick ทำให้เจาะลึกได้ง่ายขึ้นมาก ค้นหาฟังก์ชันที่คุณไม่เข้าใจ แล้วกด Google เพื่อหาคำตอบ

ทุกอย่างเกี่ยวกับโลโก้ 3 มิตินี้ควรพิสูจน์ว่า JS สมัยใหม่นั้นยังห่างไกลจากความล้าสมัย

คำแนะนำ: ลองคลิก+ลากบนหน้าจอเพื่อหมุนโลโก้ สิ่งที่สนุก!

5. ถังไม้

นี่เป็นตัวอย่างข้อมูลสุดเพี้ยนอีกอันที่พัฒนาโดย Nick Pettit โดยใช้โค้ด JS ล้วนๆ ไม่มี HTML ไม่มี CSS ทุกอย่างแสดงผลผ่านภาษา JavaScript

โดยปกติสิ่งนี้จะขึ้นอยู่กับองค์ประกอบผ้าใบซึ่งคุณสามารถสร้างภายใน JavaScript ฉันใช้มันมาบ้างแล้ว - แต่ไม่เคยถึงระดับนี้ มันแสดงให้เห็นว่าคุณสามารถทำอะไรกับไลบรารี 3D ที่เป็นของแข็งได้

และยังพิสูจน์ด้วยว่านิครู้วิธีสอนจริงๆ นี่เป็นเพียงหนึ่งในหลายตัวอย่างในบัญชี CodePen ของเขา ซึ่งทั้งหมดนี้มีความคิดเห็นที่อ่านง่ายเพื่อการเรียนรู้ขณะใช้งาน

6. Three.js + TweenMax

นักพัฒนา Martand Kashyap ได้รวมสคริปต์ TweenMax เข้ากับ Three.js เพื่อสร้างสิ่งบ้าๆ บอๆ นี้

เป็นหนึ่งในปากกาที่ไม่เหมือนใครในรายการนี้ พร้อมเอฟเฟกต์แอนิเมชั่นสุดเจ๋ง แผงหน้าปัดดูเหมือนพื้นผิวเรียบ 2D แต่ภาพเคลื่อนไหวแบบพลิกกลับสร้างเอฟเฟกต์ 3D ที่เป็นธรรมชาติ มันค่อนข้างบ้าถ้าคุณจ้องมันนานพอ

อันที่จริงแล้วมีพื้นฐานมาจากโปรเจ็กต์ภาพเคลื่อนไหวที่ Martand แปลงเป็น JavaScript ฉันเห็นสิ่งนี้บ่อยขึ้นมากและมันค่อนข้างน่าประทับใจ

7. สนามอนุภาคดาว

แนวคิดของการเคลื่อนไหวบนพื้นผิว 2 มิติทำให้นึกถึงการออกแบบพารัลแลกซ์ทุกประเภท คุณจะพบสิ่งเหล่านี้ได้ทั่วทั้งเว็บ หลายครั้งโดยใช้คุณลักษณะทดลองใน JavaScript

และตัวอย่างจาก CodePen นี้ยอดเยี่ยมมากสำหรับการรวบรวมแนวคิดดังกล่าว มันมีแอนิเมชั่นสุดเพี้ยนที่มีความเร็วในการซูมต่างกัน การแพนไปด้านข้าง และฟีเจอร์ที่เกี่ยวข้องอื่นๆ มากมาย

อนุภาคถูกสร้างขึ้นแบบไดนามิก และคุณสามารถคลิกที่ใดก็ได้บนหน้าเพื่อซูมเข้า สิ่งนี้ให้ความรู้สึกเหมือนเป็นความว่างเปล่าที่ไม่มีวันสิ้นสุด เหมือนกับที่เราอาศัยอยู่ แต่อันนี้สร้างด้วยโค้ด JS ล้วนๆ

8. Haml Cubes

สำหรับเรขาคณิตที่หมุนเพิ่มเติม ให้ลองดูคิวบ์ Three.js เหล่านี้ พวกเขาทำงานบนภาษาแม่แบบ Haml พร้อมกับ ~ 100 บรรทัดของ JavaScript

บางทีส่วนที่น่าประทับใจที่สุดของการออกแบบนี้คือเอฟเฟกต์การแรเงา คุณไม่เห็นสิ่งนี้บ่อยนัก แต่เป็นหนึ่งในวิธีที่ดีที่สุดในการสร้างเอฟเฟกต์ 3D ที่ดูสมจริงในเบราว์เซอร์

โชคดีที่คุณสามารถจัดการมันได้ทั้งหมดผ่าน Three.js ด้วยข้อมูลโค้ดที่ถูกต้อง และอันนี้สามารถใช้เป็นเทมเพลตที่ยอดเยี่ยมสำหรับจุดประสงค์นั้น

9. Tesseract

Mike Fey ได้พัฒนา tesseract ที่ซับซ้อนอย่างไม่น่าเชื่อนี้ เรนเดอร์ในพื้นที่ 3 มิติ ที่จริงแล้วดูเหมือนลูกบาศก์ที่กางออกซึ่งจัดอยู่ในพื้นที่ 3 มิติ คล้ายกับลูกบาศก์ภายในลูกบาศก์

แต่โปรดทราบว่าการสาธิตนี้ต้องใช้ไลบรารี จำนวนมาก เพื่อเริ่มต้นใช้งาน Mike มีสคริปต์ JS ห้าแบบที่แตกต่างกันด้วย jQuery, jQuery UI, ThreeJS, TweenJS และสคริปต์ CubeJS 3 หลังโฮสต์อยู่บนไซต์ส่วนตัวของเขาและควรเข้าถึงได้ฟรี

ฉันไม่สามารถพูดได้ว่าโครงการนี้จะพิสูจน์คุณค่าในโลกแห่งความเป็นจริง แต่มันเป็นแหล่งข้อมูลการเรียนรู้อย่างหนึ่งถ้าคุณต้องการดำดิ่งสู่เรขาคณิตเชิงพื้นที่ 3 มิติ

10. ชิ้นส่วน 3 มิติ

นักพัฒนา Tobias Duhr ได้สร้าง 3D Shards เหล่านี้เพื่อเป็นตัวอย่างของสิ่งที่เป็นไปได้ใน ThreeJS พวกมันทำงานเหมือนลูกบาศก์หมุนที่กล่าวถึงก่อนหน้านี้ ยกเว้นรูปร่างที่แตกต่างกันและการแรเงาก็หายไปเช่นกัน

ฉันคิดว่านี่เป็นการแนะนำที่ง่ายกว่าในการเรียนรู้ ThreeJS หากคุณไม่แน่ใจว่าจะเริ่มต้นจากตรงไหน จริงอยู่ที่ นี่ไม่ใช่บทช่วยสอน ดังนั้นจึงไม่สามารถสอนคุณเหมือนแหล่งข้อมูลอื่นๆ

แต่เพียงแค่ศึกษารหัสนี้ คุณจะเดินออกไปพร้อมกับแนวคิดใหม่ๆ สำหรับงานของคุณเอง

11. ต้นไม้พีทาโกรัส 3 มิติ

ต้นไม้พีทาโกรัส 3 มิตินี้สวยงามมาก นักพัฒนา Josep Llodra สร้างโปรเจ็กต์นี้ด้วย JavaScript เพียง 150 บรรทัด ควบคู่ไปกับไลบรารี Three.js

มันขึ้นอยู่กับโครงการนี้จริง ๆ ซึ่งฉันได้กล่าวไว้ก่อนหน้านี้ โดยพื้นฐานแล้ว มันจะจัดโครงสร้างคิวบ์เหล่านั้นเป็นรูปร่างที่กำหนดไว้เดียว แล้วจัดระเบียบตามขนาดและตำแหน่ง

หากคุณไม่แน่ใจว่าคุณสามารถทำอะไรกับ Three.js ได้บ้าง ฉันหวังว่าแกลเลอรีนี้จะสร้างแรงบันดาลใจเล็กน้อย แต่คุณสามารถหาข้อมูลเพิ่มเติมใน CodePen ได้เสมอหากต้องการดูรอบๆ