Home / 3D  / การนำไฟล์ Model 3D ขึ้นไปใช้งานบนเว็บไซต์ HTML Documents

การนำไฟล์ Model 3D ขึ้นไปใช้งานบนเว็บไซต์ HTML Documents

ในตอนนี้เทคโนโลยีเว็บได้มี WebGL หรือหลากหลายนวัตกรรมในการนำไฟล์ 3 มิติ หรือ Model 3 มิติไปแสดงผลหน้าเว็บ HTML มาลองวิธีง่ายๆ กัน

ช่วงหลังเป็นสมาชิกเว็บไซต์ Sketchfab.com ซึ่งก็ทำงาน 3D บ่อยมากขึ้นในบัญชี https://www.sketchfab.com/daydev ไปตามกันได้ครับ ก็จะมี API มากมายให้เราได้ใช้งาน หรือตัว Facebook เองก็สามารถโพส์ไฟล์ Model 3 มิติขึ้นไปได้เช่นกัน หลายคนก็นิยมใช้ three.js ที่เป็น ชุดเทคโนโลยีที่ขับเคลื่อน WebGL หลักๆ มาใช้งานเต็มซึ่งต้อง Clone repo กันมายกใหญ่ หรือใช้ a frame ก็มี

ทีนี้หลายคนก็หาวิธีง่ายๆ แบบ Simple Simple ยังไงที่จะจบไฟล์ง่ายๆ มาใช้งานในตัวอย่างนี้ลองใช้ DOM และ CSSOM มาใช้งานคู่กับ HTML Document กันครับ

มาดูส่วนของ JavaScript ก่อน

ก่อนอื่นดาวน์โหลดไฟล์นี้ไปเป็น Path เดียวกับชิ้นงานเรา ดาวน์โหลดที่นี่: 3D-Model-Bundle-JS (โหลดไปเถอะผมไม่ใช่คนเขียนแค่ minify ไว้ให้ เป็นของ Polymer ครับ) แตก zip แล้วไปวางไว้ใน Path เดียวกับ index.html ของเรา

มาดูส่วนของ Model 3 มิติ

ผมใช้เครื่องมือหากิน Blender ในการออกแบบจำลองตัวหุ่นยนต์ Granzort ก่อน

ที่นี้เวลาจะนำไปใช้งานบนมาตรฐานของ WebGL ต้อง Export ไฟล์ 3 มิติของเราเป็น GL Transmission Format (glTF)  ซึ่งตอนนี้กลายเป็นมาตรฐานของเนื้อหา 3D ของโลกไปแล้ว โดยจะมีนามสกุลเป็น .glb (ศึกษาความเป็นมาที่นี่) ซึ่งทางผู้พัฒนา Khronos.org ก็ได้ออกตัว Add-on ตัวหนึ่งให้กับ Blender ไว้แล้วคือ

https://github.com/KhronosGroup/glTF-Blender-IO

วิธีการคือ Clone git มันลงมาซะหลังจากนั้นให้ ไปที่ folder ชื่อ “addons” ทำการ Copy folder ชื่อ “io_scene_gltf2” ไว้:

เปิดไปที่ Blender ถ้าของ Windows ก็ง่ายหน่อยแต่ของ MAC ต้องคลิกขวาเลือก “Show Package Contents”

ทำการวาง folder “io_scene_gltf2” ที่  Folder “scripts/addons” ของ Blender ก็เป็นอันเสร็จ

หลังจากนั้นไปที่ User Preferences ของ Blender เพื่อไปทำการเปิดใช้งาน Add-ons

กด Save User Settings เสีย แค่นี้เราก็จะสามารถ Export ไฟล์ .glb หรือ glTF ได้แล้ว

การจัดแสงผมแย่นิดหน่อยมันจะมืดเล็กน้อยก็อย่าว่ากันนะครับ อัพโหลดไฟล์ .glb ของเราไปไว้บน Server ที่ Path เดียวกับ index.html

ส่วนของ HTML Documents

เปิดไฟล์ html ขึ้นมาทำการ include ดังนี้:

ส่วนของ DOM และ CSSMO นั้น จะใช้หลักการของการทำ Custom Elements ของ ThreeJS เช่นตัวอย่างของ <x-model> เป็น Tag หลัก เมื่อ <x-model> มีการเพิ่มเป็น Custom Elements ถูกเรียกลง DOM ส่วนของ THREE.WebGLRenderer จะมีการสร้าง Renderer ขึ้นทำการเพิ่ม Tag ของ <canvas> ลงใน HTML ตัว Canvas จะถูกจัดวางตาม style ไว้เพื่อให้ครอบคลุม Viewport และ Pointer

ดังนั้นเราจะเขียน:

ส่วนของ CSSMO

ง่ายๆ ถ้า x-model ถูกเรียกลง DOM เราก็ใช้ Transition ผ่าน CSS ได้สบายๆ ดังนี้:

ให้มันหมุนช้าๆ 10 วินาทีครบรอบที่

ไฟล์ index.html เป็นดังนี้:

ทดสอบ Model ของเราดีกว่า: http://daydev.com/models/

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

Comments

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์<br /> ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.

%d bloggers like this: