Spline là gì? Làm 3D tương tác cho web ngay trên trình duyệt

Spline là công cụ thiết kế 3D chạy trên trình duyệt: làm cảnh 3D tương tác, icon, mockup rồi nhúng lên web. Gói Free có gì, giao diện, state và event, cách xuất, tối ưu.

Spline là công cụ thiết kế 3D chạy ngay trên trình duyệt, dùng để làm cảnh 3D (và cả giao diện 2D) có tương tác rồi đưa thẳng lên web, iOS, Android mà phần lớn không cần viết code. Khác Blender hay Cinema 4D, Spline không có bước render chờ đợi: thứ bạn thấy trong editor là thứ người xem nhận được, và người xem có thể bấm, rê chuột, cuộn trang để cảnh 3D phản hồi. Spline có gói Free để bắt đầu; các tính năng AI và một số kiểu xuất file nằm ở gói trả phí. Bảng dưới tóm tắt theo tài liệu chính thức của Spline mình đọc ngày 21/10/2026.

Một lưu ý nhỏ về từ khoá: trong đồ hoạ, "spline" còn là tên gọi chung của đường cong điều khiển bằng điểm (như đường Bezier). Bài này nói về Spline, công cụ thiết kế 3D của Spline, Inc.

Spline là gì?

Spline làm cảnh 3D tương tác chạy ngay trên trang web. Trang web mẫu và thương hiệu Nến Sương Sớm là giả định, do ColorME vẽ.

Trang What is Spline? mô tả Spline là "a web-based design tool for creating interactive 3D and 2D experiences", tức công cụ thiết kế chạy trên web để tạo trải nghiệm 3D và 2D có tương tác, rồi xuất lên web, iOS và Android "without writing code".

Ba điểm làm Spline khác phần mềm 3D quen thuộc: chạy trên trình duyệt và lưu trên cloud nên nhiều người cùng sửa một file như trên Figma; chạy thời gian thực, docs viết "there is nothing to render and wait for"; và kết quả là một cảnh sống người xem xoay, bấm, cuộn được, nhúng thẳng vào website.

Spline hiện là hai trình biên tập trong một sản phẩm: trình 3D để dựng hình, điêu khắc, làm vật liệu, ánh sáng, animation, vật lý; và Hana, một canvas 2D để làm giao diện và đồ hoạ chuyển động, có thể "nhấc" hình 2D thành khối 3D. Cả hai dùng chung cách làm tương tác, chung tính năng cộng tác và chung đường xuất bản. Mỗi trình đều có một AI agent dựng và sửa cảnh theo mô tả của bạn.

Spline khác Blender, Cinema 4D thế nào?

Trang How is Spline different? so Spline với Blender, Cinema 4D, 3ds Max và Maya. Mình tóm lại thành bảng dưới. Cột Blender, Cinema 4D ghi cách làm thường gặp ở các phần mềm này, không phải so sánh tính năng đầy đủ.

Spline khác Blender, Cinema 4D ở cách làm và kết quả cuối, theo trang How is Spline different? của Spline.

Nói gọn: Spline không thay Blender. Cần phim 3D, ảnh render nội thất như ảnh chụp hay nhân vật chi tiết cho game thì Blender, Cinema 4D vẫn là lựa chọn đúng (bài học thiết kế 3D trên Blender và Cinema 4D là gì nói kỹ hơn). Còn designer đồ hoạ, UI muốn một khối 3D xoay theo chuột ở trang chủ hay một icon 3D cho app thì Spline thường nhanh hơn, vì theo docs của Spline, cách làm mượn từ phần mềm 2D khiến nó "far quicker to learn if you've never opened a 3D application".

Spline dùng để làm gì?

Trang chủ Spline xếp mẫu cộng đồng theo nhóm: website tương tác, thiết kế sản phẩm, thương hiệu, game, mockup, logo 3D, icon 3D, nhân vật chuyển động. Các việc hay gặp nhất với người học thiết kế:

• Hero website có khối 3D. Ví dụ một shop nến thơm (tên giả định: Nến Sương Sớm) đặt hũ nến 3D ở đầu trang, rê chuột thì hũ nến nghiêng theo, cuộn xuống thì nắp mở ra.
• Icon và logo 3D cho app, slide thuyết trình, bài đăng mạng xã hội: dựng trong Spline rồi xuất PNG nền trong suốt hoặc video ngắn.
• Mockup sản phẩm như hộp, chai, điện thoại để khách xoay xem các mặt thay vì xem vài ảnh tĩnh.
• Prototype UI có chiều sâu: thẻ, nút, màn hình có hiệu ứng 3D, làm trong Hana hoặc trình 3D.
• Animation ngắn cho mạng xã hội: xuất video từ cảnh, vòng lặp mượt vì Spline render theo animation đã đặt chứ không quay màn hình.

Spline có miễn phí không? Gói Free có gì

Gói Free của Spline và các tính năng cần gói trả phí, theo trang pricing và docs đọc ngày 21/10/2026.

Trang Pricing của Spline viết "Start creating realtime 3D design experiences for free", tức có thể bắt đầu miễn phí. Thẻ gói Free (đọc ngày 21/10/2026) liệt kê: "Limited Personal Files", "Unlimited file viewers", "Web exports with watermark", "Access to the Spline Library". Tức là gói Free giới hạn số file, cảnh xuất web có watermark, nhưng vẫn dùng được thư viện mô hình và mời người xem không giới hạn.

Spline hiện có các gói Free, Hobby, Pro, Max và Enterprise. Theo các thẻ gói trên trang pricing: Hobby thêm số file không giới hạn, bỏ watermark trên cảnh xuất web, xuất ảnh độ phân giải cao hơn, upload video vào cảnh, mở thư viện vật liệu và âm thanh; Pro thêm xuất video, xuất cho Apple và Android, không giới hạn số scene trong một file; Enterprise thêm tải code về và bản tự host (self-hosted). Trang Exporting as GLTF/GLB cũng ghi xuất GLTF, GLB kèm màu và texture là tính năng trả phí của Pro và Max; gói thấp hơn chỉ xuất được hình khối màu xám mặc định.

Về AI: trang Pricing trong docs viết mọi tính năng AI (AI agent, AI 3D Generation, AI Textures, phần tạo bằng prompt trong Hana) dùng chung một quỹ AI credits hằng tháng "included with every paid plan". Trang AI 3D Generation ghi rõ "AI 3D Generation is a paid feature". Vì vậy đừng kỳ vọng dùng AI ở gói Free. Giá từng gói bạn xem trực tiếp trên trang pricing.

Giao diện Spline gồm những phần nào?

Sơ đồ 6 vùng chính trong editor 3D của Spline, vẽ lại theo tài liệu chính thức (không phải ảnh chụp màn hình).

Theo trang Understanding Spline's UI, đăng nhập xong bạn vào Dashboard (Home, My files, Templates, Community, Academy, nút + Create). Mở một file 3D, editor gồm: thanh bên trái với ba tab Agent (trợ lý AI), Objects (cây đối tượng, Outliner) và Assets; ba tab Preview, Edit, Code phía trên (Edit để làm, Preview chạy cảnh như người xem thấy, Code chứa HTML, CSS, JavaScript của file); tool dock với nút + để thêm đối tượng và Transform để di chuyển, xoay, phóng to; nút Share, Export; Property Panels bên phải (không chọn gì là thiết lập cả cảnh, chọn đối tượng là thuộc tính của nó); và viewport ở giữa.

Hana dùng cùng khung nhưng hợp việc 2D: Pages và Layers bên trái, thanh công cụ dọc (khung, hình, hình 3D, chữ, bút vector), bảng thuộc tính có Layout (auto layout), States, Events, Fill, Stroke, Effects, Export. Ai đã quen Figma sẽ thấy Hana rất gần (xem bài Figma là gì).

Cách dùng Spline: làm cảnh 3D đầu tiên

Các bước (và phím tắt camera) tóm tắt từ trang Creating your first scene và các trang liên quan. Mình không đăng nhập Spline cho bài này, nên tên nút lấy theo tài liệu chính thức.

Bước 1: tạo file mới

Đăng ký tài khoản tại spline.design. Ở dashboard, bấm dấu + cạnh tên bạn ở góc trên bên trái, hoặc nút New File trong tab My Files. Nếu muốn học nhanh, mở Library (thư viện) hoặc Community, chọn một cảnh có sẵn rồi remix để xem người khác làm thế nào.

Bước 2: làm quen điều khiển camera

Bước 3: thêm hình khối và vật liệu

Bấm + trên tool dock để thêm hộp, cầu, trụ, chữ 3D, hoặc vẽ hình 2D bằng Pen rồi extrude (đùn) thành khối. Khối tham số như hình cầu chỉnh được số cạnh (Sides): ít cạnh thì nhẹ hơn khi lên web. Ghép, khoét khối dùng boolean; nặn hình mềm dùng sculpting. Vật liệu là một chồng lớp (Color, Gradient, Image, Noise, Glass, Fresnel, Outline...) sắp xếp và che (mask) như layer trong phần mềm đồ hoạ. Ví dụ hũ nến của Nến Sương Sớm: lớp Glass cho thân hũ, lớp Color màu kem cho sáp, lớp Noise thật nhẹ để bề mặt bớt "nhựa".

Bước 4: thêm ánh sáng, xem thử

Spline có Directional Light (ánh nắng), Point Light (bóng đèn), Spot Light (đèn rọi) và môi trường HDRi; trang tối ưu của Spline khuyên dùng dưới 3 đèn mỗi cảnh. Xong thì bấm tab Preview (Play) để chạy cảnh như người xem, rồi chuyển sang thêm tương tác.

Làm tương tác không cần code: state, event, action

Ví dụ tương tác: rê chuột lên hũ nến thì nắp nhấc lên, làm bằng state, event, action, không cần code.

Đây là phần làm nên khác biệt của Spline. Theo trang How state-based animation works, bạn làm theo ba ý:

• State (trạng thái): chọn đối tượng, ở bảng States bấm +. Spline tạo Base State (trạng thái gốc) và một State mới; bạn đổi vị trí, xoay, phóng to, màu sắc ở State mới.
• Event (sự kiện): chọn điều gì kích hoạt: bấm chuột, rê chuột, nhấn phím, cuộn trang, va chạm, kéo thả, khoảng cách...
• Action (hành động): chọn việc xảy ra, thường là chuyển sang State khác. Spline tự tạo chuyển động mượt giữa hai trạng thái.

Ví dụ hũ nến: State 2 là nắp nhấc lên 40 đơn vị và xoay nhẹ; Event là Mouse Hover trên hũ; Action là chuyển sang State 2. Vào Preview, rê chuột lên hũ là nắp mở ra. Cần dữ liệu thật (giá trị từ API, webhook) thì Spline có Variables; cần code thì có tab Code và Code API, nhưng phần lớn hiệu ứng cho website bán hàng, portfolio không cần đến.

Xuất và nhúng cảnh Spline lên web

6 cách xuất cảnh Spline và khi nào dùng từng cách.

Mọi kiểu xuất đều bắt đầu từ nút Export trên thanh công cụ. Theo trang FAQ và các trang Exporting của Spline:

Khác biệt Public URL và Viewer hay bị bỏ qua: trang Exporting as Spline Viewer giải thích iframe chỉ "nghe" được thao tác bên trong khung, còn Viewer nhận được sự kiện trên toàn trang. Muốn khối 3D xoay theo chuột ở bất cứ đâu trên trang, hoặc đổi trạng thái khi người xem cuộn trang, bạn cần Viewer. Viewer có tuỳ chọn Logo để bật, tắt logo Spline trên bản nhúng; trên gói Free, cảnh xuất web có watermark như đã nói ở trên.

Sau khi sửa cảnh, nhớ bấm Update Public URL để link phản ánh bản mới. Trang Exporting as Code lưu ý animation và sự kiện chỉ hoạt động khi xuất Vanilla JS và React. Spline có hướng dẫn tích hợp riêng cho Webflow và Framer; với Figma thì nhúng qua plugin bên thứ ba (Anima).

Spline nhập được file gì?

Theo trang How to Import Content, bạn kéo thả file vào viewport hoặc bấm Cmd+O (Ctrl+O). Spline nhận 3D (OBJ, FBX kèm animation và rig, STL, GLTF, GLB, .spline), ảnh PNG, JPG, SVG (hỗ trợ một phần), video MP4, âm thanh MP3, WAV và Gaussian Splats. Mẹo cho dân đồ hoạ: muốn biến logo 2D thành khối 3D, Spline khuyên file SVG không có điểm trùng hay đường hở, lưu SVG 1.1 từ Illustrator hoặc flatten trong Figma trước khi nhập, rồi dùng extrude để đùn thành khối.

Cảnh Spline bị nặng, load chậm: tối ưu thế nào?

Những con số nên nhớ khi tối ưu cảnh Spline cho web, theo trang How to optimize your scene.

Cảnh 3D trên web nặng hơn ảnh nhiều, nhất là trên điện thoại. Trang How to optimize your scene có Performance Panel (mở từ bảng Export) báo dung lượng ước tính, điểm thời gian tải, số polygon, vật liệu, đèn, texture, kèm gợi ý đỏ (quan trọng nhất), vàng (nên sửa), xám (dọn dẹp). Các gợi ý chính:

• Giảm polygon: hạ Sides của khối tham số; subdivision thường chỉ cần 1 đến 2 mức, tránh quá 3; mô hình nhập từ nơi khác nên dùng bản nhẹ.
• Bật Compression trong Play Settings, chọn Geometry Quality là Performance, chỉnh mức nén ảnh: Spline viết trong một số trường hợp file nhỏ đi tới 4 lần.
• Bớt đối tượng, vật liệu đơn giản: xoá thứ người xem không thấy, ít texture lớn, ít lớp, ít hiệu ứng hậu kỳ, dưới 3 đèn.
• Boolean và vật lặp lại: giảm cạnh hoặc "Apply & Edit" để chốt boolean; dùng Component thay vì nhân bản.

Cách thường gặp khi làm web: chỉ đặt một cảnh 3D ở hero, phần còn lại dùng ảnh tĩnh. Spline Viewer mặc định lazy loading, chỉ tải cảnh khi nó hiện trên màn hình.

AI trong Spline làm được gì?

Docs Spline liệt kê bốn tính năng AI, tất cả dùng AI credits của gói trả phí: AI Agent dựng đối tượng, vật liệu, ánh sáng, tương tác theo mô tả (mọi thay đổi hoàn tác và sửa tay được); AI 3D Generation tạo mô hình từ câu mô tả hoặc một ảnh tham chiếu; AI Textures tạo texture gỗ, gốm, bê tông bằng chữ; và AI trong Hana dựng một màn hình giao diện để bạn sửa tiếp. Trang hướng dẫn AI 3D Generation khuyên xem mô hình ở Clay mode (ẩn màu, texture) vì texture có thể che bề mặt méo. Lời khuyên của mình: học tay trước, vì không hiểu state, vật liệu, ánh sáng thì rất khó sửa kết quả AI cho đúng ý khách.

Cộng đồng, thư viện mẫu và bản quyền

Trang 3D Library viết: "All 3D models in the library are free and can be used for commercial purposes", tức mô hình trong thư viện dùng được cho mục đích thương mại. File trên Community thì khác: trang Community Platform ghi "All the community files are licensed under CC BY 4.0", nghĩa là được dùng, sửa nhưng phải ghi công tác giả. Ngược lại, cảnh bạn đăng lên Community cũng theo giấy phép đó, nên với dự án của khách, hỏi ý khách trước khi đăng.

Ai nên học Spline và học thế nào?

Spline hợp với designer UI/UX, web muốn thêm chiều sâu cho giao diện mà không phải nhờ dev dựng Three.js từ đầu; designer đồ hoạ, social media cần icon, logo, mockup 3D nhanh; và người làm motion cần animation 3D ngắn cho mạng xã hội. Lộ trình gợi ý: điều khiển camera và khối cơ bản, dựng lại một cảnh trong Library để hiểu vật liệu và ánh sáng, làm một tương tác hover, xuất Public URL và nhúng thử vào trang cá nhân, cuối cùng mới tới tối ưu và AI.

Bố cục, màu sắc, typography vẫn quyết định cảnh 3D đẹp hay rối, nên nếu bạn đang học giao diện, khoá học UI/UX của ColorME là nền tốt trước khi thêm 3D; muốn đi sâu dựng hình, render thì xem khoá học Thiết kế 3D. Hai thuật ngữ real-time rendering và PBR trong thư viện ColorME giải thích thêm khái niệm hay gặp khi đọc docs Spline.

Câu hỏi thường gặp

Spline là gì?

Spline là công cụ thiết kế chạy trên trình duyệt để tạo cảnh 3D và giao diện 2D có tương tác, rồi xuất lên web, iOS, Android. Nó có trình 3D, canvas 2D tên Hana và tính năng cộng tác thời gian thực.

Spline có miễn phí không?

Có gói Free để bắt đầu. Theo trang pricing của Spline, gói Free giới hạn số file cá nhân và cảnh xuất web có watermark. Các tính năng AI dùng AI credits của gói trả phí.

Spline có cần máy mạnh không?

Không cần cài, nhưng FAQ của Spline khuyên dùng hệ điều hành mới nhất vì 3D trên trình duyệt cần nhiều CPU, GPU hơn công cụ 2D.

Spline xuất được file gì?

Link công khai, mã nhúng Viewer, code (Vanilla JS, React, Next.js, Three.js, react-three-fiber), ảnh PNG, JPG, video, file 3D GLTF, GLB, USDZ, STL và file .spline. Một số kiểu xuất cần gói trả phí.

Spline khác Blender thế nào?

Spline làm cảnh tương tác chạy thời gian thực trên web, không có bước render. Blender mạnh ở dựng hình phức tạp, render ảnh và phim chất lượng cao.

Mô hình trong thư viện Spline có dùng thương mại được không?

Theo docs Spline, mô hình trong 3D Library miễn phí và dùng được cho mục đích thương mại. File trên Community theo giấy phép CC BY 4.0, cần ghi công tác giả.