🎞️ Videos → ทำ Graphic 3D บนเว็บง่ายขึ้นด้วย ThreeSceneStudio

แนะนำตัวและโปรเจกต์ 3D กราฟิกบนเว็บให้ง่ายขึ้น0:00

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

ผมต้องแนะนำตัวเองก่อนก็คือ จริงๆ ผมก็เป็น ทำงานเป็น Software Engineer แต่ว่าผมแบบว่ามีความสนใจด้าน คอมพิวเตอร์กราฟิกนะครับ พวก Shader หรือว่า 3D กราฟิก ซึ่งพอผมรู้ตัวว่าผมแบบสนใจพวกนี้ ผมก็เริ่มทำ โปรเจกต์เกี่ยวกับ 3D กราฟิกมาตลอดอะนะครับ ซึ่งโปรเจกต์ที่ผมทำส่วนใหญ่ทั้งหมดเนี่ย ก็คือทำบนเว็บ เพราะว่ามันเป็นสกิลเดิมที่ผมถนัด (หัวเราะ) ผมก็เอามาทำต่อ

ปัญหาเดิมๆ ในการเริ่มโปรเจกต์ 3D บนเว็บ0:51

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

ไอ้นี่นะครับมันเป็นเสี้ยวหนึ่ง (หัวเราะ) เสี้ยวหนึ่งของปัญหาที่แบบว่าผมต้องจัดการ ทุกครั้งที่เริ่มโปรเจกต์ใหม่นะครับ อย่างเช่น เวลาเราจะเริ่มตั้งโปรเจกต์ 3D กราฟิก ด้วย Three.js บนเว็บเนี่ย เราก็ต้องเขียนโค้ดเพื่อแบบ เอ่อ เซ็ตอัพ Renderer, เซ็ตอัพ Scene เอ่อ แบบทำหลายอย่างอะครับ อย่างตัวที่ผมมักจะลืมเลยก็อย่างเช่นเนี่ย อย่างส- การเซ็ตอัพ Pixel Ratio นะครับ เพราะว่าถ้าเราไม่เซ็ตเนี่ย ภาพมันก็จะแบบว่า… เหมือนมันไม่แมตช์ กับพิกเซลของ Device อะนะครับ มันก็จะทำให้ภาพแตก หรือว่าจะเป็นการ Handle Offscreen Event เนี่ยครับ เพราะว่าเวลาที่เราสลับแท็บออก บราวเซอร์เนี่ย JavaScript มันจะไม่ทำงาน แล้วพอเวลาเรากลับเข้ามาที่หน้าเว็บที่เป็น 3D เนี่ย มันจะเกิดอาการแบบกระตุกหรือว่ามีดีเฟกต์หรือเกิดบัคนะครับ ใช่

โค้ดตัวอย่างและปัญหา Compatibility ระหว่าง Blender กับ Three.js2:08

ก็สังเกตว่ามันมีอันต้องทำเยอะครับ อันนี้คือตัวอย่างโค้ดแบบ Simple ที่สุดในการทำ

กราฟิก 3D บนเว็บ โดยการอิมพอร์ตโมเดลมาจาก Blender หรือโปรแกรม 3D อื่นๆ จะเห็นว่ามันต้องมีโค้ดเยอะมากครับ อ่า เนี่ย อย่างในในภาพเนี่ยนะครับ ผมก็ลืมใส่ Pixel Ratio เหมือนกัน (หัวเราะ) แล้วก็อีกปัญหาหนึ่งที่ผมมักจะเจอเลยก็คือ เรื่องของ Compatibility ระหว่าง Blender กับตัว Three.js เพราะว่าพอมันเป็นเอ็นจินตีความค่าต่างๆ ใน เอ่อ รูปแบบ 3D เนี่ย มันก็ตีค่าไม่เหมือนกัน อย่างเช่น ด้านซ้ายเนี่ย ค่าแสง ออกมาเป็นสีที่ปกติ แต่พอเอาเข้า Three.js เนี่ย มันตีค่าแสงออกมาแบบว่าสว่างเกิน เนี่ยครับ ผมก็ต้องมานั่งแก้ มานั่งปรับใน Three.js

เครื่องมืออื่นๆ ที่ช่วยทำ 3D บนเว็บให้ง่ายขึ้น3:06

คราวนี้เนี่ย อ่า ปัจจุบันเนี่ยผมก็เห็นว่ามันมี Tool ที่ ที่ช่วยให้การทำอะไรพวกนี้มันง่ายขึ้น

แต่ไม่ได้หมายความว่าเราไม่ต้องทำ มันง่ายขึ้น แต่ว่าเราก็ยังต้องทำอยู่ดี ก็อย่างเช่น

ใครที่เขียน React แล้วอยากเขียน 3D เนี่ยก็จะไปฝั่งซ้ายคือ

เป็น React Three Fiber เป็นไลบรารี่ตัวหนึ่ง ที่ช่วยทำให้การทำ 3D มันง่าย หรือถ้าด้านขวาก็คือคนที่เขียน Vue นะครับ ส่วน Angular อื่นๆ นี่ผม

ผมไม่ได้หาครับ ก็ประมาณนี้

Three Scene Studio: ลดการเขียนโค้ด, เน้น Visual Editing3:48

แต่คราวนี้เนี่ยมันจะมีอีกตัวหนึ่งที่ช่วยได้ ก็คือ นี่ครับ Three Scene Studio ซึ่งหลักการของ Three Scene Studio เนี่ยก็คือ

พยายาม Reduce ส่วนที่เป็น Coding ออก เพราะว่ามัน บางทีมันซับซ้อน แล้วก็บางทีการเขียนโค้ดกับการทำให้เห็นภาพเนี่ย มันยาก

ขั้นตอนการทำงาน: เปรียบเทียบแบบเดิมกับ Three Scene Studio4:16

อันนี้คือ Process ปกติที่ปกติผมทำเวลาที่ผมจะทำโปรเจกต์ 3D นะครับ ก็เริ่มจากการ Export โมเดลออกมาจาก Blender มาเซ็ตอัพ ตัวไอ้ที่ผมพูดไปเมื่อกี๊อะครับ Renderer กล้อง ทุกอย่าง อิมพอร์ตโมเดลเข้ามาใส่ไว้ใน Three.js แล้วก็ขั้นตอนสุดท้ายก็คือ Adjustment ก็คือจัดการพวกค่าสีค่าอะไรให้มันแบบว่าโอเค ซึ่งสองส่วนหลังเนี่ยเราต้องทำทั้งหมดในโค้ด แต่คราวนี้ถ้าเกิดว่าเราใช้ Three Scene Studio เนี่ยก็คือ หลักการก็คือเรา Export โมเดลออกมาจาก Blender เอาโมเดลนี้ไป Edit ต่อในโปรแกรม Three Scene Studio แล้วก็ตัวโปรแกรมเนี้ย เราก็สามารถ Edit แบบว่าเหมือนใน Blender เลย ก็คือเห็นภาพเลยแบบ Real Time แบบไม่ต้องเขียนโค้ด หลังจากนั้นเราก็ค่อย Export ออกมาเป็นไฟล์ เอ่อ นามสกุล .tss แล้วเอาไฟล์นี้ไปโหลด เข้าไลบรารี่ โหลดด้วยไลบรารี่ที่ผมเขียนขึ้นมา Three Scene Studio Core ก็เสร็จเลย ก็จะได้ 3D กราฟิกในเว็บทันที มันก็จะกลายเป็นอย่างงี้ ก็คือเราได้เขียนโค้ดน้อยลง โอเคครับ เดี๋ยว Demo เลย

Demo: สร้าง Animation รถวิ่งและนกบินใน Three Scene Studio5:48

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

โอเค แป๊บนึงนะฮะ ผมว่าเอาอันนี้ลงหน่อย โอเค

เซฟ คราวนี้ก็เอ็กซ์พอร์ตครับ ก็เอ็กซ์พอร์ตมาเป็นไฟล์ GLB นะครับ แล้วก็ เอ่อ เดี๋ยว ก่อนอื่นกด A ก่อนครับ เพื่อที่จะเลือกทุกโมเดลเลยที่อยู่ในซีนแล้วก็เอ็กซ์พอร์ต อ่า เป็น GLB นะครับ เป็นไฟล์ Universal นะครับที่เขาใช้ในเว็บอยู่แล้ว แล้วก็

อ่า ตรงนี้ก็เลือกเป็นเฉพาะอ็อบเจกต์ที่เราเลือก แล้วก็เลือกกล้องแล้วก็เลือกแสง ก็เอ็กซ์พอร์ตออกมา

Import ไฟล์ GLB เข้า Three Scene Studio และปรับแต่ง7:23

โอเคครับ ตอนนี้เราก็ได้ไฟล์

โอเค ได้ไฟล์ออกมาแล้วครับ demo-tss.glb

คราวนี้สเต็ปถัดมาก็เข้าไปที่เว็บไซต์ครับ

เว็บไซต์ก็คือเดี๋ยวผมทิ้งไว้หลัง หลังทอล์คนะฮะ ก็คือเข้ามาที่เว็บนี้นะครับ แล้วก็กด Create New Project ก็จะเห็นเป็นเวิร์กสเปซที่มันว่างอยู่ คราวนี้เราก็ ขั้นแรกเราอิมพอร์ตตัวไฟล์ที่เราต้องการนะครับ กดบวกตรงนี้แล้วก็ตัวนี้ก็กดเลือกเป็นตัวนี้

ไอ้ตัวนี้ก็คือ... อ่า... จะใช้ Draco Compression ไหม ซึ่งก็ตัวนี้จริงๆ ตอนแรกเราไม่ต้องกดก็ได้ครับ แต่ถ้าไฟล์มันมีการ compression มาเนี่ย มันก็จะขึ้น error นะครับ เราก็กดติ๊กถูกไป ว่าเราจะ decode ด้วย โอเค คราวนี้มันก็จะ อ่า export ทุกอย่างออกมาครับ ก็จะมี เราก็ ต้องจริง ๆ แล้วโปรเจกต์นี้มันสามารถ support การ import หลายซีนได้ แต่ตอนนี้เรามีซีนเดียว dropdown เลยมีแค่อันเดียวนะครับ เราก็เลือกว่าเราจะเอาซีนนี้ แล้วเราก็ เราเลือกโมเดลทุกอย่างเลย จริง ๆ เรา import บางโมเดลได้ เราก็เลือกกล้องด้วย แล้วก็ animation นี้เราเลือกเฉพาะเทคหนึ่งพอนะครับ

เพราะว่าไอ้ animation นี้ถ้าผมจำไม่ผิดมันเป็น อ่า มันเป็น animation ของรถแต่เราไม่ได้ใช้ เรา import แค่นี้พอ เราก็ submit

แก้ปัญหาแสงและแนะนำโหมดต่างๆ ใน Three Scene Studio9:04

นี่ครับปัญหาแรกก็จะเกิดนะฮะ ก็คือมันสว่างใช่ไหมครับ เราก็... อ่า

มาที่ด้านซ้ายนะครับ มันก็จะมีเป็น panel ตรงเนี้ยครับ ที่บอกว่ามีออปเจ็กต์อะไรในโปรเจกต์เราบ้าง

เราก็กดเลือก Light ครับ แล้วตรงนี้เราก็ปรับ Intensity ซึ่งปกติเราต้องทำในโค้ดครับ แต่อันนี้เราทำในนี้ได้เลย โอเค

โอเคครับ ก็โอเคล่ะ คราวนี้ เอ่อ

ตัวแอปพลิเคชันเนี้ย มันจะมี 3 โหมดครับ ด้านบนนะครับก็คือโหมด

Adjust Screen ก็คือเราสามารถแบบว่า อย่างที่บอกว่าเราจะทำในเว็บใช่ไหมครับ ในเว็บเนี่ยก็ responsive ก็เป็นเรื่องสำคัญ เพราะฉะนั้นเนี่ยเราสามารถ adjust ได้ว่าแบบว่า ภาพที่ออกมาเนี่ยมันจะเป็นยังไง ในสกรีนต่าง ๆ อย่างเช่น สมมติว่าถ้าโทรศัพท์มันก็ต้องยาวๆ หน่อย ก็ลองดูอย่างงี้ ใช่ไหมครับ

แล้วก็ โหมดนี้ก็คือเป็นโหมดที่เอาไว้ให้เราแบบเป็นอิสระหมุนดูได้

แล้วโหมดสุดท้ายเนี่ยมันคือ เป็น component จริงๆ เลย ที่มันจะ render ในเว็บเรา ก็คือถ้าในหน้าตาตรงนี้มันเป็นยังไง บนเว็บเราก็จะเป็นอย่างงั้น โอเคครับ

ตั้งค่า Responsive และกล้องใน Three Scene Studio10:35

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

เราก็มากด Aspect นะครับ

แล้วก็ใส่ทุก property ในแอปเนี้ย สามารถใส่สูตรได้ คือใส่สมการคณิตศาสตร์ได้ อย่างเช่นอันนี้เราก็ใส่… ผมจะมีตัวแปรไว้ให้ 3 ตัวเป็นพื้นฐานอยู่ก็คือ CH เนี่ยครับ มันก็คือความสูงของหน้าจอ

ความสูงของคอนเทนเนอร์ CW เนี่ยคือความกว้างของคอนเทนเนอร์ แล้วก็ตัว T เนี่ย คือเวลาของ animation ก็คือมันจะเป็น millisecond ครับ มันจะบวกเพิ่มเรื่อยๆ ทีละ 1ms

คราวนี้ผมก็ใส่สูตรตรงนี้ว่าเป็น จริงๆ ในอนาคตผมแพลนไว้ว่า ผมจะทำให้มันเป็นออโต้นะครับ แบบว่ากดแล้วก็ใส่สูตรนี้ให้เลย แต่ว่าอันนี้เป็น MVP ก็เอาเท่านี้ก่อน โอเคฮะ ตอนนี้ก็ responsive แล้ว โอเค

สร้าง Animation นกบินและรถวิ่งด้วยสูตรคำนวณ12:04

คราวนี้ก็จะทำให้นกบินนะครับ

วิธีทำให้นกบินก็คือเรากดไปโหมดแสดงผลจริงๆ ก่อน แล้วเราก็กดตรงนี้ครับ มันจะมีลิสต์ของ animation ทั้งหมดที่เรา import มา เราก็กด ตรงนี้เราจะเห็นว่ามัน progression อะ มันเป็น 0 เราก็กด progress

แล้วตรงนี้เราจะเห็นว่ามันเป็น 0 ครับ คราวนี้เราจะใส่สมการตรงนี้ลงไป ซึ่ง อ่า

เดี๋ยวก่อนนะฮะ

โอเค ผมจะใส่สมการเป็น

เป็น sine นะครับ แล้วก็ millisecond หารด้วย

อ่า 200

โอเคครับ คือ progress เนี่ยมันเป็นค่าระหว่าง 0 ถึง 1 0 คือเป็น animation ตอนต้นเลย แล้วก็ 1 ก็คือจบ animation เพราะฉะนั้น sine ตอนนี้มันเป็น -1 ถึง 1 ซึ่งมัน มันไม่ตรงใช่มั้ยครับ เราก็ต้อง อ่า หาร 2 แล้วก็บวก 0.5

ครับผม มันก็จะได้ animation นกบินแล้ว คราวนี้ก็เราจะทำให้รถวิ่งละ

วิธีที่ทำให้รถวิ่งเนี่ยก็คือเราจะให้รถมันอยู่กับที่ แต่เราจะทำให้ซีนเนี่ยมันวิ่ง ซึ่งวิธีทำให้ซีนวิ่งเนี่ยครับ ก็คือ เอิ่ม

ตัว ตัวซีนเนี่ย ไอ้ตรงเนี้ยคือเสาไฟฟ้านะครับ แล้วก็รถเนี่ยมันจะอยู่ตรงกลางตรงนี้ แล้วก็ถนนน่ะ มันเป็นถนนต่อกันหลายๆ อันครับ ในโมเดลแต่ผมไม่ได้เอาให้ดูเมื่อกี้ แต่เดี๋ยวจะเอาให้ดูอีกทีในโปรแกรมนะครับ วิธีการก็คือ ตัวเนี้ย มันต้องวิ่งผ่านถนนอย่างเงี้ยอะครับ วิ่งจากล่าง

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

พอมอดุโลด้วย 1000 เนี่ย ค่ามันจะวิ่ง 0 ถึง 1000 ปุ๊บ แล้วมันก็จะวาร์ปกลับมา มาที่ 0 ใหม่ วนอยู่อย่างงี้ แล้วผมก็หารด้วย 1000 มันก็จะกลายเป็น อ่า 0 ถึง 1

คราวนี้ผมก็ อ่า คูณด้วย 2 แล้วลบด้วย 1 นะครับ มันก็จะเป็น อ่า ค่ามันก็จะวิ่งตั้งแต่ -1 ถึง 1 คราวนี้ผมก็คูณ คูณด้วย W ก็คือความกว้างของถนน

จริงๆ มันต้องเป็นความยาวนะฮะ เอ้อ อย่างเช่นถนนเนี้ย ถ้ามันกว้าง W เนี่ยมันก็จะเลื่อนไป W แล้วมันก็จะวาร์ปกลับมา -W แล้วก็เลื่อนขึ้นไป W แล้วก็วาร์ปกลับมา เพราะฉะนั้น ขั้นแรกเราต้องไปหาก่อนว่าเราต้องเอาสูตรนี้มาก่อน ก๊อปสูตรนี้มานะครับเข้าไปแล้วก็เลือกซีนนะฮะ

แล้วก็ โอเค แล้วก็เลือก แกน Z นะครับ

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

มันก็จะเป็นอย่างงี้ฮะ คราวนี้เราไปหาความกว้างของ ของถนนก่อน ก็

อ่า ผมหาก่อน

เนี่ยครับลองดูถนนอันนึง ถนนอันหนึ่งมัน มันกว้าง 2 เราก็ก๊อป ก๊อปอันนี้มาฮะ

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

โอเคฮะ แค่นี้มันก็จะได้รถวิ่งละ แล้วก็เดี๋ยวเราจะทำให้ล้อหมุนด้วย แล้วก็หาออบเจกต์ของล้อก่อนนะฮะ

อ่า

ไม่ใช่ โอเคนี่ อันนี้คือล้อใช่ไหมครับ แล้วก็โรเทชั่นเอ็กซ์

อ่าการหมุนก็คือเราใส่ T ไปเลยก็ได้ แต่อาจจะไวไป เราใส่หารสัก 100 ประมาณนี้ฮะ แล้วก็ตัวนี้

แล้วก็บวกด้วย T หาร 100 โอเค

คราวนี้เราก็ได้ซีนรถวิ่งละ ก็ทุกอย่างเสร็จแล้ว จริงๆ ก็ยังทำ animation อย่างอื่นได้อีกอะนะฮะ

Export ไฟล์จาก Three Scene Studio และนำไปใช้ในโปรเจกต์ React17:41

แต่ก็เอาไว้เท่านี้ก่อน แล้วก็ คราวนี้เราก็ได้เวลาเอ็กซ์พอร์ตนะครับ เอ็กซ์พอร์ตเนี่ยทำได้ 2 ทางนะครับ ทางแรกเนี่ย อ่า อันแรกเนี่ยมันเป็นปุ่ม Save นะครับ ก็คือสำหรับเซฟโปรเจกต์นี้ไว้ทำต่อ แต่ว่าเราจะเอ็กซ์พอร์ต อันนี้เราเซฟไว้ก่อนก็ได้ เซฟ เราก็จะได้ไฟล์มาเป็น TSSP แต่ถ้าเราจะเอ็กซ์พอร์ตเรากดตัวนี้ เราจะได้ไฟล์ TSS มา

พอเสร็จอันนี้ปุ๊บเราได้ไฟล์ที่เราต้องการแล้ว เราก็ไปที่โปรเจกต์ที่เราจะเอาตัว

ตัวไฟล์เนี่ยไปแสดงบนเว็บ แล้วก็จริงๆ ผมเซ็ตอัพไว้ให้แล้ว

โอเค

เดี๋ยวก่อนนะฮะ

โอเค โปรเจกต์นี้ อ่า

เราก็รันโปรเจกต์นี้ขึ้นมา โปรเจกต์นี้เป็นโปรเจกต์ React นะครับ รันด้วย Vite

โอเค แล้วก็มาที่ตัวนี้ อ่า ตอนนี้โปรเจกต์นี้ไม่มีอะไรเลย เป็นแค่เว็บว่างๆ ที่มันมี div ตัวหนึ่งดำๆ วางอยู่

ติดตั้ง Three Scene Studio Core และใช้งานใน React19:12

สิ่งที่ผมจะทำก็คือขั้นแรกผม install library อ่า three

three-scene-studio-core แล้วก็ลงไป

โอเค

นี่ครับผมก็ลงไปแล้ว คราวนี้ก็มาที่โค้ด ตอนนี้อันนี้ก็คือ div ของเราใช่ไหมครับ อันนี้คือ component app

ก็สิ่งที่เราต้องทำ อันนี้ผมลบทิ้งอันเก่าไปก่อน ก็คือผมก็ก๊อปไอ้ตัวไฟล์เมื่อกี้ที่เราเอ็กซ์พอร์ตมานะครับ

อ่า จากดาวน์โหลด อ่า

นี่ อันนี้ TSS นะครับ

โอเคตอนนี้ผมก็ก๊อปมาไว้ตรงนี้แล้ว แล้วก็เอาไปไว้ไฟล์ public

ปึ๊บ แล้วคราวนี้ผมก็

set up ตัว project นะครับ set up ตัว TSS library ใน project

วิธี setup ก็คือเราสร้าง instance ของ Three Scene Studio Manager ขึ้นมา พอเราสร้างเสร็จปุ๊บ เราก็โหลดโมเดล ตรงนี้เราก็ใส่ URL ของโมเดลเรา จริงๆ URL ของโมเดลจะเอาไปวางไว้ที่ไหนก็ได้นะฮะ แล้วก็ start clock จากนั้นเราก็เอาตัว

เอาตัว component เอาตัว อ่า

HTML element ของตัว ที่มันมีการแสดงผลโมเดลของเราเนี่ย ใส่เข้าไปใน div ตัวนี้ที่มันดำๆ อะครับ

เสร็จแล้วก็ ก็เสร็จเลย

อ่า ซึ่งก็ responsive ด้วยอันนี้มัน div สูง 500 กว้าง 500 ใช่ไหมครับ

เราก็… สมมติว่าผมให้มัน 100

อ่า

อย่างงี้ มันก็ มันก็จะ responsive ตามเลย เราไม่ต้องไปเขียน responsive อะไรอีกแล้ว

สรุปผลลัพธ์และช่องทางติดตามเพิ่มเติม21:50

ไม่ต้อง handle อะไรทั้งสิ้น ก็คือ Three Scene Studio จัดการให้หมด เนี่ยฮะ

อืม ไม่มีภาพยืดภาพอะไรแล้วครับผม อ่า

ก็ประมาณนี้ครับ ก็คือ… ตัวเว็บไซต์เนี่ยตอนนี้ก็เป็นโดเมนนี้ครับ ถ้าใครอยากเข้าไปลองก็คือ เป็นเว็บไซต์นี้ แล้วก็ตัวไลบรารี่เนี่ยก็คือตัวนี้

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