# Tạo khối blob 3D có hoạt ảnh phản hồi theo chuột - Spline 101 | Xây dựng cảnh tương tác đầu tiên của bạn - Spline Academy (https://spline.design/vi/academy/tutorials/create-animated-3d-blobs-that-react-to-your-mouse)

> Trong hướng dẫn thân thiện với người mới này, chúng ta sẽ bắt đầu từ đầu và học cách tạo những khối blob 3D đầy màu sắc, có hoạt ảnh và tương tác bằng Shape…

1. [Academy](https://spline.design/vi/academy)
2. [Khóa học](https://spline.design/vi/academy/collections)
3. [Spline 101 | Xây dựng cảnh tương tác đầu tiên của bạn](https://spline.design/vi/academy/collections/spline-101-build-your-first-interactive-scene)
4. Tạo khối blob 3D có hoạt ảnh phản hồi theo chuột

# Tạo khối blob 3D có hoạt ảnh phản hồi theo chuột

Bài 15 / 16Spline 3DCơ bản12 phút

Trong hướng dẫn thân thiện với người mới này, chúng ta sẽ bắt đầu từ đầu và học cách tạo những khối blob 3D đầy màu sắc, có hoạt ảnh và tương tác bằng Shape Blend.

Chúng tôi sẽ chia sẻ một số mẹo đơn giản để áp dụng màu sắc và texture nhằm tạo chuyển tiếp mượt mà và gradient tự nhiên.

Ngoài ra, chúng ta sẽ khám phá cách thêm sự kiện tương tác, như thay đổi hình dạng của blob khi bạn rê chuột lên nó.

\--

Khám phá thêm nhiều nhà sáng tạo và dự án tuyệt vời #MadeInSpline tại <https://community.spline.design/>

## Bạn sẽ học được gì

1. [0:00Giới thiệu](https://www.youtube.com/watch?v=l32kDk5DU00&t=0s)
2. [0:24Tạo blob bằng Shape Blend](https://www.youtube.com/watch?v=l32kDk5DU00&t=24s)
3. [1:31Thêm màu sắc](https://www.youtube.com/watch?v=l32kDk5DU00&t=91s)
4. [3:21Thêm hiệu ứng phát sáng và texture](https://www.youtube.com/watch?v=l32kDk5DU00&t=201s)
5. [5:20Tạo hoạt ảnh cho blob](https://www.youtube.com/watch?v=l32kDk5DU00&t=320s)
6. [6:49Cách làm hoạt ảnh lặp lại](https://www.youtube.com/watch?v=l32kDk5DU00&t=409s)
7. [8:32Hiệu ứng tương tác với con trỏ](https://www.youtube.com/watch?v=l32kDk5DU00&t=512s)
8. [9:44Mẹo nhanh](https://www.youtube.com/watch?v=l32kDk5DU00&t=584s)
9. [10:38Các ví dụ khác về cảnh tương tác với Shape Blend](https://www.youtube.com/watch?v=l32kDk5DU00&t=638s)
10. [11:00Cộng đồng Spline của chúng tôi](https://www.youtube.com/watch?v=l32kDk5DU00&t=660s)
11. [11:05Hãy trở thành Designer of the Week tiếp theo!](https://www.youtube.com/watch?v=l32kDk5DU00&t=665s)

## Tài nguyên liên quan

- [Animated Shape BlendMẫu](https://app.spline.design/academy/tutorials/create-animated-3d-blobs-that-react-to-your-mouse?redirect-duplicate-template-uuid=546ba9b3-f563-43e4-bbd7-a72c5941902e&is-2d-file=false)
- [Shape BlendTài liệu](https://docs.spline.design/designing-in-3-d/shape-blend)
- [Materials & ShadingTài liệu](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)
- [How state-based animation worksTài liệu](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Follow EventTài liệu](https://docs.spline.design/interaction-states-events-and-actions/events/follow-event)

## Tổng quan

- Spline 3D
- 12 phút
- Cơ bản

## Tiếp theo

[Biến thiết kế Spline thành trải nghiệm web tương tác10 phútCơ bản](https://spline.design/vi/academy/collections/spline-101-build-your-first-interactive-scene/turn-your-spline-designs-into-interactive-web-experiences)[Tiếp tục](https://spline.design/vi/academy/collections/spline-101-build-your-first-interactive-scene/turn-your-spline-designs-into-interactive-web-experiences)

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

Trình chỉnh sửa 3D và 2D cho các nhóm và tác nhân AI của họ. Xuất bản lên web, iOS và Android.

#### Hỏi AI về Spline

#### Sản phẩm

- [Thiết kế 3D](https://spline.design/vi/3d-design)
- [Hana](https://spline.design/vi/hana)
- [Omma](https://omma.build)
- [Tạo 3D bằng AI](https://spline.design/vi/ai-generate)
- [Spline MCP](https://spline.design/vi/mcp)
- [Spline Arena](https://spline.design/vi/arena)
- [Bảng giá](https://spline.design/vi/pricing)
- [Doanh nghiệp](https://spline.design/vi/enterprise)

#### Runtime

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

#### Ứng dụng

- [Tải xuống](https://spline.design/vi/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Tải Spline Mirror](https://spline.design/download-mirror)

#### Học

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/vi/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Giải pháp](https://spline.design/solutions)

#### Cộng đồng

- [Cộng đồng Spline](https://community.spline.design)
- [Blog](https://spline.design/vi/blog)
- [Changelog](https://spline.design/vi/changelog)
- [Giáo dục](https://spline.design/vi/education)
- [Contra](https://spline.design/contra)
- [Tiếp thị liên kết](https://spline.design/vi/affiliate)

#### Công ty

- [Khách hàng](https://spline.design/vi/customers)
- [Tuyển dụng](https://www.ycombinator.com/companies/spline/jobs)
- [Bảo mật](https://spline.design/vi/security)

#### Pháp lý

- [Điều khoản & Điều kiện](https://spline.design/terms)
- [Quyền riêng tư](https://spline.design/privacy)

#### Liên hệ

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

© 2026 - Spline, Inc.