# Cách xây dựng quả cầu 3D phản hồi với chuyển động và tương tác - Spline Academy (https://spline.design/vi/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

> Hôm nay, chúng tôi sẽ chỉ cho bạn cách tạo quả cầu 3D tương tác mang cảm hứng công nghệ này bằng cloner và sự kiện chuột trong Spline, hoàn hảo cho mọi dự…

1. [Academy](https://spline.design/vi/academy)
2. [Hướng dẫn](https://spline.design/vi/academy/tutorials)
3. Cách xây dựng quả cầu 3D phản hồi với chuyển động và tương tác

# Cách xây dựng quả cầu 3D phản hồi với chuyển động và tương tác

Spline 3DTrung cấp7 phút

Hôm nay, chúng tôi sẽ chỉ cho bạn cách tạo quả cầu 3D tương tác mang cảm hứng công nghệ này bằng cloner và sự kiện chuột trong Spline, hoàn hảo cho mọi dự án web như landing page, giới thiệu sản phẩm hoặc bất kỳ dự án thiết kế nào bạn thích.

Cảnh này được tạo bởi Vlad Kolokolnikov, hãy xem cộng đồng Spline để tìm cảnh này và nhiều cảnh 3D khác có thể remix miễn phí.

Demo: <https://app.spline.design/community/file/306ca2a5-d1ab-46ac-a27c-198575c82db0>

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

1. [0:00Giới thiệu](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=0s)
2. [0:18Tạo đối tượng cơ sở và thêm vật liệu](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=18s)
3. [1:30Dùng Cloner](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=90s)
4. [2:25Thêm sự kiện Follow](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=145s)
5. [3:46Thêm sự kiện Distance](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=226s)
6. [4:32Hoàn thiện hoạt ảnh](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=272s)
7. [5:17Tạo hoạt ảnh cho nhóm cloner](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=317s)
8. [5:47Thiết kế hoàn chỉnh](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=347s)
9. [6:13Mẹo xuất](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=373s)
10. [6:20Kết thúc](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=380s)

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

- [Reactive OrbMẫu](https://app.spline.design/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction?redirect-duplicate-template-uuid=684c8aec-6fec-4d6b-ae37-a3a1fd5fac27&is-2d-file=false)
- [Cloner MotionTài liệu](https://docs.spline.design/designing-in-3-d/cloner-motion)
- [How state-based animation worksTài liệu](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Materials & ShadingTài liệu](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)

## Tổng quan

- Spline 3D
- 7 phút
- Trung cấp

## Thuộc

- [Spline nâng cao | Đi sâu vào tính năng](https://spline.design/vi/academy/collections/spline-advanced-feature-deep-dive/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

## Hướng dẫn liên quan

[Tất cả hướng dẫn](https://spline.design/vi/academy/tutorials)

[Cách tạo trực quan hóa dữ liệu 3D trong Spline bằng biến và API thời gian thựcSpline 3DNâng cao15 phút](https://spline.design/vi/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Tạo vật liệu Liquid Glass trong 3DSpline 3DCơ bản12 phút](https://spline.design/vi/academy/tutorials/create-liquid-glass-materials-in-3d)[Tạo công tắc tương tác với progressive blur và gradientHanaCơ bản4 phút](https://spline.design/vi/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)

[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.