# Liquid Glass และ 3D ใน Hana - Spline blog (https://spline.design/th/blog/hana-3d-glass-autolayout-video)

> ใหม่ใน Hana: 3D Transform, Liquid Glass และ Autolayout

[บล็อก](https://spline.design/th/blog)

9 กรกฎาคม 2568

# Liquid Glass และ 3D ใน Hana

ใหม่ใน Hana: 3D Transform, Liquid Glass และ Autolayout

[เปิด Hana](https://app.spline.design)

วันนี้เราขอประกาศอัปเดตครั้งใหญ่ของ Hana ที่มาพร้อมฟีเจอร์ล้ำหน้าอย่าง Liquid Glass แบบเรียลไทม์, 3D Transform, Autolayout และ Video Layers

## Liquid Glass ใน Hana

นับตั้งแต่เปิดตัว iOS 26 เอฟเฟกต์ Liquid Glass ก็ได้รับความสนใจจากวงการออกแบบเป็นอย่างมาก ตอนนี้คุณสามารถใช้เอฟเฟกต์นี้กับเลเยอร์วัตถุใดก็ได้ใน Hana

คุณสามารถแก้ไขพารามิเตอร์ของกระจก เช่น Distortion เพื่อควบคุมระดับการหักเหของแสง

แต่คุณยังก้าวไปไกลกว่าสไตล์ของ iOS และสร้างเอฟเฟกต์กระจกในแบบของคุณเองได้ เราออกแบบพารามิเตอร์ให้ยืดหยุ่นพอที่จะสร้างผลลัพธ์เชิงสร้างสรรค์ได้หลากหลาย โดยให้คุณขยายพฤติกรรมบางอย่างของเอฟเฟกต์ให้เกินจริง เพื่อให้ได้สุนทรียะทางภาพที่โดดเด่นยิ่งขึ้น

วางเมาส์หรือแตะเพื่อโต้ตอบ (ประสบการณ์ที่สร้างด้วย Hana)

## กระจกที่ซ้อนกันได้

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

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

จัดการ Liquid Glass หลายเลเยอร์ใน Hana

## 3D Transform

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

ใน Hana ตอนนี้วัตถุใดก็เป็นวัตถุ 3D ได้ พร้อมพารามิเตอร์สำหรับควบคุมตำแหน่ง (Depth) การหมุน และเพอร์สเปกทีฟในพื้นที่ 3D

พารามิเตอร์ทั้งหมดนี้ทำแอนิเมชันได้และใช้ร่วมกับระบบสเตตและอีเวนต์ได้

ควบคุมเพอร์สเปกทีฟ การหมุน และตำแหน่งแกน z ของวัตถุใน Hana

## เฟรมและพอร์ทัล 3D

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

ทำได้ง่าย ๆ แค่วางไอเท็มไว้ในเฟรม ทำให้เฟรมเป็น 3D แล้วเปลี่ยนตำแหน่งหรือการหมุน 3D ของไอเท็มด้านใน จากนั้นถ้าคุณเปลี่ยนการหมุนหรือตำแหน่งของเฟรม คุณจะเห็นว่าไอเท็มด้านในเรนเดอร์ออกมาอย่างไร พร้อมความลึกหลายระดับ

พอร์ทัล 3D ภายในเฟรมที่สร้างใน Hana

## Autolayout

ตอนนี้ Hana รองรับเลย์เอาต์ที่มีพารามิเตอร์ทำแอนิเมชันได้ทั้งหมด คุณสามารถสร้างเลย์เอาต์ทั้งแนวตั้งและแนวนอน พร้อมปรับระยะขอบด้านใน (padding) และช่องว่าง (gap) ได้

เลย์เอาต์ทำงานร่วมกับอีเวนต์และสเตต และอัปเดตแบบเรียลไทม์เพื่อเพิ่มการโต้ตอบ

เรายังเพิ่มการรองรับเลย์เอาต์แบบ masonry ซึ่งคล้ายกับเลย์เอาต์แบบคอลัมน์ของ Pinterest

ประสบการณ์ที่สร้างด้วย Hana โดยใช้ Layout

## Video Layers

ตอนนี้คุณสามารถฝังวิดีโอลงในเลเยอร์ใดก็ได้ใน Spline Hana อย่างง่ายดาย ซึ่งสะดวกมากเมื่อสร้างงานนำเสนอแบบอินเทอร์แอคทีฟหรือออกแบบงานโมชัน แค่สลับไปที่ Video Layer ในแผง Fill แล้วอัปโหลดหรือลากวางวิดีโอของคุณ

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

## ความเป็นไปได้ใหม่ในการสร้างสรรค์

เยอะมากเลยใช่ไหม! เราหวังว่าคุณจะสนุกกับฟีเจอร์ใหม่ทั้งหมดที่เราปล่อยออกมาวันนี้ และเริ่มสร้างสรรค์งานออกแบบใหม่ ๆ ที่น่าตื่นเต้น

— ทีม Spline

## บทความอื่น ๆ จากบล็อก

[3 พฤศจิกายน 2569ขอแนะนำ Spline Arena](https://spline.design/th/blog/introducing-spline-arena)[21 ตุลาคม 2569ขอแนะนำ Spline สำหรับ ChatGPT](https://spline.design/th/blog/introducing-spline-for-chatgpt)[27 สิงหาคม 2569ขอแนะนำ Hana V2](https://spline.design/th/blog/hana-v2)

[Spline](https://spline.design/th)

เอดิเตอร์ 3D และ 2D สำหรับทีมและเอเจนต์ของทีม เผยแพร่ได้ทั้งบนเว็บ iOS และ Android

#### ถาม AI เกี่ยวกับ Spline

#### ผลิตภัณฑ์

- [ออกแบบ 3D](https://spline.design/th/3d-design)
- [Hana](https://spline.design/th/hana)
- [Omma](https://omma.build)
- [สร้าง 3D ด้วย AI](https://spline.design/th/ai-generate)
- [Spline MCP](https://spline.design/th/mcp)
- [Spline Arena](https://spline.design/th/arena)
- [ราคา](https://spline.design/th/pricing)
- [องค์กร](https://spline.design/th/enterprise)

#### รันไทม์

- [Web](https://spline.design/th/web)
- [iOS](https://spline.design/th/ios)
- [Android](https://spline.design/th/android)

#### แอป

- [ดาวน์โหลด](https://spline.design/th/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [ดาวน์โหลด Spline Mirror](https://spline.design/download-mirror)

#### เรียนรู้

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/th/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [โซลูชัน](https://spline.design/solutions)

#### คอมมูนิตี้

- [คอมมูนิตี้ Spline](https://community.spline.design)
- [Blog](https://spline.design/th/blog)
- [มีอะไรใหม่](https://spline.design/th/changelog)
- [การศึกษา](https://spline.design/th/education)
- [Contra](https://spline.design/contra)
- [พันธมิตร](https://spline.design/th/affiliate)

#### บริษัท

- [ลูกค้า](https://spline.design/th/customers)
- [ร่วมงานกับเรา](https://www.ycombinator.com/companies/spline/jobs)
- [ความปลอดภัย](https://spline.design/th/security)

#### กฎหมาย

- [ข้อกำหนดและเงื่อนไข](https://spline.design/terms)
- [ความเป็นส่วนตัว](https://spline.design/privacy)

#### ติดต่อ

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.