Không biết viết mã cũng làm được hoạt ảnh 3D? Hướng dẫn toàn quy trình Remotion Skill + Three.js
Trước đây, để làm một đoạn hoạt ảnh 3D cần những gì?
Trước hết, bạn phải học Blender hoặc Maya: dựng mô hình, tạo vật liệu, thiết lập ánh sáng, gắn xương, chỉnh đường cong chuyển động, cài đặt thông số kết xuất; mất vài tháng vẫn chưa chắc thành thạo. Đi theo hướng lập trình còn thử thách hơn: pipeline WebGL, shader GLSL, phép biến đổi ma trận, hàng chục API của Three.js; chỉ để dựng một khối lập phương xoay cũng phải viết hai trăm dòng mã.
Còn bây giờ thì sao?
Cài xong công cụ, viết một câu mô tả, AI sẽ giúp bạn tạo cảnh 3D. Xem trước theo thời gian thực trong Studio, chỉnh đến khi hài lòng, rồi chụp màn hình, xuất file và chia sẻ với bạn bè.
Bài viết này sẽ hướng dẫn toàn bộ quy trình, không cần bạn viết một dòng mã nào.
I. Ba thành phần tạo nên "phép màu" này
Remotion Skill: bạn nói bằng lời, nó viết mã
Remotion vốn là một framework mã nguồn mở dùng React để tạo video (GitHub hơn 45K Star). Nhưng với bạn, điều thực sự quan trọng là Agent Skill của nó, một plugin AI ra mắt vào tháng 1 năm 2026, đã được cài đặt hơn 25K lần ngay trong tuần đầu tiên.
Sau khi cài đặt, bạn chỉ cần mô tả hoạt ảnh mong muốn bằng ngôn ngữ tự nhiên trong Claude Code, AI sẽ tự động viết mã. Một cửa sổ xem trước theo thời gian thực nằm ở bên trái để bạn theo dõi hiệu quả và chỉnh sửa bất cứ lúc nào.
Three.js / WebGL: công cụ 3D trong trình duyệt
Three.js che giấu sự phức tạp của WebGL. Bạn không cần biết vertex buffer là gì hay shader được biên dịch ra sao; chỉ cần nói "tôi muốn một quả cầu kim loại xoay dưới đèn chiếu", Three.js sẽ phụ trách việc hiển thị trên màn hình.
@remotion/three: đưa 3D vào video
Đội ngũ Remotion đã phát triển riêng một gói cầu nối. Gói này giúp cảnh 3D của Three.js đồng bộ với dòng thời gian video của Remotion: mỗi khung hình hiển thị thế nào thì khi xuất thành MP4 cũng sẽ như vậy.
Kết hợp ba thành phần này, bạn chỉ cần nói một câu với AI, nó sẽ giúp tạo một video hoạt ảnh 3D.
II. Cần chuẩn bị gì? Hoàn tất trong năm phút
Những thứ bạn cần rất đơn giản:
1. Cài Node.js
Truy cập nodejs.org để tải xuống, sau đó cứ bấm "Tiếp theo" là được. Đây là môi trường cơ bản để chạy Remotion.
2. Tạo một dự án Remotion
Mở terminal (trên Windows có tên là "Command Prompt" hoặc PowerShell), rồi nhập:
npx create-video@latestCông cụ sẽ hỏi tên dự án, sau đó chọn một mẫu mặc định. Chỉ mất một phút.
3. Cài Remotion Skill và hỗ trợ 3D
npx skills add remotion-dev/skills npm i three @react-three/fiber @remotion/three @types/threeHai dòng lệnh, chỉ cần sao chép, dán và nhấn Enter. Sau đó, bất cứ khi nào bạn nói điều gì liên quan đến Remotion trong Claude Code, AI sẽ tự động kích hoạt chế độ "trợ lý hoạt ảnh 3D".
4. Khởi động xem trước
npx remotion studioMột cửa sổ trình duyệt sẽ tự động mở. Từ đây, mọi cảnh 3D bạn tạo đều sẽ được hiển thị theo thời gian thực trong cửa sổ này.
III. Vấn đề thực sự: làm sao "nói" ra hình ảnh trong đầu?
Thiết lập môi trường chỉ mất năm phút. Thách thức thực sự nằm ở đây: khi bạn nói với AI "tôi muốn một hoạt ảnh 3D thật ngầu", giữa cách AI hiểu và hình ảnh trong đầu bạn tồn tại một khoảng cách khổng lồ.
Ngôn ngữ vốn không phải là phương tiện truyền tải 3D. Đây không phải lỗi của bạn.
Bốn phương pháp dưới đây sẽ giúp bạn vượt qua khoảng cách này. Chúng không đòi hỏi nền tảng kỹ thuật nào, mà cần kỹ năng giao tiếp.
Phương pháp 1: đưa ảnh tham khảo (hiệu quả nhất)
Tìm một hình ảnh có hiệu ứng gần với điều bạn mong muốn: ảnh thiết kế ý tưởng, ảnh chụp màn hình phim hay tác phẩm của người khác đều được. Kéo thẳng ảnh vào khung trò chuyện Claude Code:
"Dùng Remotion + Three.js để tạo cảm giác như thế này. Đổi màu vàng thành màu xanh lam, làm bề mặt quả cầu mịn hơn một chút."
Một hình ảnh có thể truyền tải ngay lập tức nhiều thông tin: mức độ phản chiếu của chất liệu kim loại, mật độ hạt, độ cứng của ánh sáng, xu hướng màu sắc và trọng tâm bố cục. Dùng vài trăm chữ cũng chưa chắc mô tả rõ được những điều này.
Phương pháp 2: lặp lại theo từng vòng, đừng nói hết một lần
Sai lầm phổ biến nhất của người mới: viết tất cả yêu cầu trong một đoạn prompt. Kết quả thường là mọi thứ đổ vỡ hoàn toàn.
Cách làm đúng là mỗi vòng chỉ điều chỉnh một khía cạnh:
Câu đầu tiên: "Tạo một quả cầu và cho nó xoay chậm quanh trục Y." (Thấy quả cầu xoay trong Studio → tiếp tục.) Câu thứ hai: "Đổi quả cầu thành chất liệu thủy tinh, trong suốt. Thêm một nguồn sáng chiếu từ góc trên bên trái." (Quả cầu thủy tinh xuất hiện → tiếp tục.) Câu thứ ba: "Thêm một vòng hạt nhỏ xung quanh, giống vành đai sao bao quanh quả cầu. Hãy làm chúng phát sáng." Câu thứ tư: "Trong hai giây đầu, các hạt từ từ xuất hiện; trong một giây ở giữa, chúng đột ngột tăng tốc; cuối cùng phân tán ra."
Bốn vòng trò chuyện cộng lại mất mười phút. Bạn có thể thấy kết quả ngay sau mỗi bước, và biết ngay bước nào có vấn đề nếu xảy ra lỗi. Cách này nhanh hơn nhiều so với việc cố viết một mô tả hoàn hảo rồi mất nửa ngày sửa lỗi.
Phương pháp 3: bảng tra cứu nhanh từ khóa hiệu ứng
Bạn không cần học phần mềm 3D hay ngôn ngữ shader. Nhưng nắm được một vài "từ khóa hiệu ứng" sẽ giúp hiệu quả giao tiếp tăng gấp ba lần:
Cảm giác mong muốn｜Chỉ cần nói như sau
Kim loại, phản chiếu, điểm sáng sắc nét｜"Tạo chất liệu kim loại, bề mặt thật mịn"
Thủy tinh, trong suốt, có khúc xạ｜"Tạo cảm giác như một quả cầu thủy tinh, ánh sáng đi qua sẽ khúc xạ"
Phát sáng như đèn neon｜"Thêm hiệu ứng phát sáng, giống đèn neon"
Bụi sao, hạt bay lượn｜"Thêm các hạt xung quanh, như bụi trong bầu trời sao"
Vệt sáng chuyển động｜"Thêm hiệu ứng vệt sáng vào quỹ đạo chuyển động"
Bề mặt chuyển động, biến dạng｜"Bề mặt cần gợn sóng, giống như nước"
Rậm lông, mờ nhám｜"Tạo chất liệu mờ nhám"
Nền mờ, có độ sâu trường ảnh｜"Làm mờ nền một chút để làm nổi bật vật thể phía trước"
Ánh đèn chiếu với tông tối｜"Dùng đèn chiếu từ trên xuống, làm môi trường tối hơn một chút"
Phong cách hoạt hình phẳng｜"Tạo cảm giác kết xuất hoạt hình"
Bạn không cần nói những thuật ngữ như meshPhysicalMaterial hay transmission; chỉ cần nói "quả cầu thủy tinh trong suốt", AI sẽ biết phải làm thế nào.
Phương pháp 4: để AI hỏi ngược lại bạn
Nếu hoàn toàn chưa có ý tưởng, hãy nói thẳng:
"Tôi muốn làm một cảnh 3D bằng Remotion + Three.js nhưng chưa biết nên chọn thông số nào. Hãy hỏi tôi vài câu trước, tôi sẽ chọn đáp án."
AI sẽ hỏi bạn: có bao nhiêu vật thể? Nguồn sáng ấm hay lạnh? Nhịp nhanh hay chậm rãi? Cảm giác chất liệu thế nào? Chọn đáp án luôn dễ hơn điền vào chỗ trống.
IV. Mẫu prompt hoạt ảnh 3D, cứ dùng trực tiếp
Các prompt dưới đây đã được kiểm chứng thực tế. Chỉ cần sao chép, thay vài từ là có thể sử dụng. Mỗi mẫu đều ghi rõ bối cảnh phù hợp.
Mẫu 1: phong cách giới thiệu sản phẩm (đơn giản nhất)
Dùng Remotion + Three.js để tạo một hoạt ảnh giới thiệu sản phẩm. Một [vật thể, ví dụ: điện thoại/đồng hồ/quả cầu] đặt chính giữa khung hình, chất liệu là [chất liệu: kim loại/thủy tinh/mờ nhám], màu là [màu sắc]. Nó xoay chậm quanh trục Y, không quá nhanh, tạo cảm giác tao nhã. Một nguồn sáng điểm chiếu từ phía trên bên trái, tạo bóng mềm. Nền là một màu đơn, màu [màu nền]. Toàn bộ hoạt ảnh kéo dài [thời lượng, ví dụ: 6 giây].Phù hợp với: giới thiệu logo, hình ảnh sản phẩm, hoạt ảnh thương hiệu.
Mẫu 2: phong cách vũ trụ hạt
Dùng Remotion + Three.js để tạo một cảnh hạt. Ở giữa khung hình là một [vật thể], xung quanh có rất nhiều hạt nhỏ phát sáng bao quanh. Hạt có màu [màu sắc], từ từ tiến về vật thể trung tâm theo quỹ đạo xoắn ốc. Nền mang cảm giác không gian tối. Thêm một chút hiệu ứng phát sáng. Thời lượng [thời lượng, ví dụ: 8 giây].Phù hợp với: intro công nghệ, trực quan hóa dữ liệu, nền sân khấu ra mắt.
Mẫu 3: phong cách ánh sáng và chất liệu
Dùng Remotion + Three.js để tạo một cảnh giới thiệu ánh sáng và chất liệu. Một [hình học: quả cầu/khối lập phương/vòng tròn] được làm từ [chất liệu], với [hiệu ứng chất liệu: khúc xạ trong suốt/phản chiếu kim loại/phát sáng neon]. Một tia sáng quét từ trái sang phải trên bề mặt, ánh sáng có màu [màu sắc] tạo ra [hiệu ứng] trên vật thể. Máy quay từ từ xoay quanh vật thể để thể hiện chi tiết chất liệu. Thời lượng [thời lượng].Phù hợp với: nghiên cứu chất liệu, cảm hứng thiết kế, trình bày ý tưởng.
Mẫu 4: chuyển văn bản thành 3D
Biến một đoạn văn bản thành hiệu ứng 3D. Nội dung văn bản là [văn bản bạn muốn], sử dụng font 3D để kết xuất, độ dày rõ ràng. Văn bản nổi hướng về phía người xem, kèm một chút [hiệu ứng: phát sáng/kim loại/thủy tinh]. Nền là [màu đơn/chuyển màu/bầu trời sao]. Thời lượng [thời lượng].Phù hợp với: hoạt ảnh tiêu đề, áp phích, thẻ mạng xã hội.
Mẫu 5: nghệ thuật hình học trừu tượng
Tạo một hoạt ảnh hình học trừu tượng. Một vài [loại hình học] phân bố ngẫu nhiên trong không gian, kích thước và góc xoay của mỗi vật thể đều khác nhau. Chất liệu của chúng là [phong cách chất liệu thống nhất], bảng màu gồm [màu 1] + [màu 2] + [màu 3]. Tất cả vật thể từ từ [cách chuyển động: lơ lửng/xoay/nhấp nhô], giống như một tác phẩm điêu khắc động. Thêm ánh sáng mềm và hiệu ứng độ sâu trường ảnh nhẹ. Thời lượng [thời lượng].Phù hợp với: sáng tạo nghệ thuật, hình nền, video ý tưởng.
Bạn cũng có thể thêm những "gia vị" này
Thêm các cụm từ ngắn sau vào cuối bất kỳ mẫu nào để kiểm soát hiệu ứng chính xác hơn:
Thêm câu này｜Hiệu ứng
"Thêm một lớp hậu kỳ Bloom nhẹ"｜Vật thể phát sáng có quầng sáng lan tỏa, tạo cảm giác mộng ảo hơn
"Máy quay từ từ xoay quanh vật thể"｜Chuyển động máy quay tạo cảm giác điện ảnh hơn so với góc nhìn cố định
"Dùng nền chuyển màu thay vì màu đơn"｜Tránh sự đơn điệu
"Thêm hiệu ứng độ sâu trường ảnh, làm mờ nhẹ nền"｜Làm nổi bật chủ thể hơn
"Thêm ease-in ở đầu hoạt ảnh và ease-out ở cuối"｜Nhịp điệu tự nhiên hơn, không đột ngột
"Trong khoảng từ giây 3 đến giây 5, phóng to rồi thu nhỏ vật thể"｜Tạo thêm nhịp "hô hấp" cho hoạt ảnh
V. Từ prompt đến ảnh chụp màn hình, quy trình hoàn chỉnh
Được rồi, bây giờ bạn đã viết xong một prompt (hoặc chọn một mẫu ở trên), tiếp theo cần làm gì?
Bước 1: gửi prompt cho Claude Code
Mở thư mục dự án Remotion, rồi dán prompt vào Claude Code. Nếu đã cài Remotion Skill, Claude sẽ tự động chuyển sang "chế độ hoạt ảnh".
Bước 2: xem trước
Sau khi AI tạo mã, chạy:
npx remotion studioCửa sổ xem trước theo thời gian thực sẽ xuất hiện trong trình duyệt. Kéo thanh thời gian để xem hiệu ứng của từng khung hình.
Bước 3: lặp lại
Quan sát bản xem trước và nói cho AI biết điều gì bạn chưa hài lòng:
"Nền tối quá, làm sáng hơn một chút." "Số lượng hạt quá nhiều, giảm xuống còn một nửa." "Tốc độ xoay nhanh quá, giảm 30%."
Mỗi lần chỉnh sửa, Studio sẽ tự động làm mới. Tiếp tục điều chỉnh cho đến khi bạn hài lòng.
Bước 4: Chụp ảnh màn hình
Đã chỉnh xong thì chụp ảnh màn hình:
Cách A — chụp một khung hình (khuyến nghị, nhanh nhất):
npx remotion still <tên component> tên tệp đầu ra.png --frame=<số khung hình>Ví dụ, nếu muốn chụp khung hình ở giây thứ 3 (tức khung hình thứ 180 ở tốc độ 60fps):
npx remotion still My3DScene screenshot.png --frame=180Chờ vài giây, ảnh chụp 1080p sẽ được tạo. Đổi số khung hình rồi chụp thêm ảnh khác — kiểu "chụp một khung hình" này nhanh hơn nhiều so với kết xuất toàn bộ video.
Cách B — xuất toàn bộ video rồi chụp khung hình:
npx remotion render My3DScene out.mp4Sau khi kết xuất xong, hãy tạm dừng bằng bất kỳ trình phát nào rồi chụp ảnh màn hình. Chậm nhưng đầy đủ — phù hợp khi cần chụp liên tiếp nhiều khung hình.
Cách C — chụp trực tiếp bằng Studio:
Trong cửa sổ xem trước của Studio, kéo đến khung hình mong muốn, nhấp chuột phải → lưu ảnh chụp màn hình. Trực quan nhất, không cần dòng lệnh.
Bước 5: Sử dụng cho tài khoản chính thức / mạng xã hội
Ảnh đã chụp có định dạng PNG tiêu chuẩn và độ phân giải 1080p. Bạn chỉ cần kéo trực tiếp vào trình biên tập tài khoản chính thức hoặc đăng lên vòng bạn bè.
Nếu cần nhiều ảnh, hãy thay đổi các tham số trong prompt (màu sắc/chất liệu/góc nhìn), rồi lặp lại Bước 1-4. Năm biến thể có thể hoàn thành trong mười phút.
VI. Nói thật: Những việc phương án này không thể làm
Phần trước đã nói về những gì nó có thể làm. Bây giờ hãy nói về những gì nó không thể làm — và khi nào bạn nên từ bỏ phương án này để chuyển sang công cụ khác.
Giới hạn bản chất của WebGL
WebGL chạy trong trình duyệt. Trình duyệt không phải là trình kết xuất 3D chuyên nghiệp; nền tảng bên dưới là một công cụ web mô phỏng đường ống GPU. Điều này có nghĩa là:
Chất lượng hình ảnh có giới hạn. Ray tracing Cycles của Blender, kết xuất quang phổ của Octane — WebGL không làm được điều nào trong số đó. Không có Global Illumination thực sự, không có ray tracing, vật liệu chỉ là phiên bản đơn giản hóa. Hình ảnh "sạch" nhưng cũng "giả", thiếu ánh sáng gián tiếp tinh tế và chi tiết vật liệu như ở các trình kết xuất chân thực.
Độ phức tạp của cảnh bị giới hạn. Vài chục nghìn tam giác vẫn có thể chạy mượt, nhưng khi lên đến hàng triệu thì bắt đầu giảm khung hình. Hơn mười nghìn hạt là bắt đầu giật. Trong phần mềm 3D chuyên nghiệp, một mô hình nhân vật có vài triệu mặt là chuyện bình thường.
Không có mô phỏng vật lý. Vải bay, chất lỏng bắn tung tóe, va chạm vật thể rắn — những việc chỉ cần vài cú nhấp trong Blender, nhưng trong WebGL bạn phải tự xây dựng từ đầu, mà kết quả cũng chỉ là phiên bản đơn giản hóa.
Kết xuất chậm. Một cảnh 3D phức tạp dài 30 giây có thể mất vài giờ để kết xuất. Cùng loại cảnh đó trong Blender có thể chỉ mất vài phút khi dùng GPU.
WebGPU vẫn đang phát triển
WebGPU là tiêu chuẩn thế hệ tiếp theo, nhanh hơn WebGL. Nhưng đến giữa năm 2025, các trình duyệt mới chỉ bắt đầu hỗ trợ sơ bộ — Firefox và Safari vẫn đang bắt kịp, còn hỗ trợ WebGPU của Three.js vẫn mang tính thử nghiệm và API có thể tiếp tục thay đổi. Dùng nó cho dự án thực tế lúc này là một canh bạc.
Mã do AI viết cũng có cạm bẫy
Biến một câu thành hoạt ảnh 3D quả thực rất kỳ diệu, nhưng tình trạng mã do AI tạo ra "trông có vẻ đúng nhưng chạy lại sai" không hề hiếm:
Cảnh đơn giản (một vật thể, một nguồn sáng, hoạt ảnh xoay): 80% chạy thành công ngay lần đầu
Cảnh có độ phức tạp vừa phải (nhiều vật thể, nhiều chất liệu, hệ thống hạt): cần 2-3 vòng sửa lỗi
Cảnh phức tạp (shader tùy chỉnh, pipeline hậu kỳ): mã do AI tạo ra phần lớn không thể sử dụng
Khi nào nên đổi công cụ?
Nhu cầu của bạn | Công cụ nên dùng
Làm hoạt ảnh Logo / sản phẩm / trực quan hóa dữ liệu | Remotion + Three.js ✅
Làm ảnh ý tưởng, ảnh đăng mạng xã hội | Remotion + Three.js ✅
Làm phim ngắn có nhân vật và bối cảnh | Blender
Hướng đến độ chân thực như ảnh chụp | Unreal Engine / Blender Cycles
Tốc độ kết xuất là yêu cầu bắt buộc | Kết xuất GPU bằng Blender
Nói đơn giản: Remotion + Three.js là một "công cụ nhanh chóng tạo ra hình ảnh đẹp", không phải "engine kết xuất cấp độ điện ảnh". Hãy dùng nó để chụp ảnh màn hình, làm concept và khám phá hình ảnh — nó cực nhanh và nhẹ. Nhưng đừng mong dùng nó để làm VFX cho Dune.
VII. Tổng hợp tài liệu tốt nhất
Tài liệu về Remotion
Tài nguyên | Mô tả
Tài liệu chính thức | Viết rất tốt, hãy ưu tiên bắt đầu từ đây
remotion-template-three | Mẫu nhập môn 3D chính thức, dùng ngay sau khi cài đặt
Remotion Workshop | Khóa học miễn phí 52 phút do chính nhà sáng lập hướng dẫn
Make Video With Code | Thực hành miễn phí trong 1.5 giờ
ByteGrad: Remotion + Claude Code | Minh họa thực hành viết Remotion với sự hỗ trợ của AI
Claude-Code-Video-Toolkit | Bộ công cụ hoàn chỉnh — component + chuyển cảnh + hệ thống chủ đề
Quy chuẩn 3D remotion-best-practices | Tổng hợp các lỗi 3D thường gặp và cách phòng tránh
Three.js / WebGL
Tài nguyên | Mô tả
Tài liệu chính thức của Three.js | Hơn 300 ví dụ có thể chạy
WebGL2 & GLSL Primer | Từ con số 0 đến thành thạo GLSL, nắm vững nguyên lý một cách hệ thống
Three.js Bootcamp | Khóa học 20 giờ, bao gồm dự án game 3D (cập nhật 2026.6)
Three.js Journey | Khóa học kinh điển của Bruno Simon
Nhập môn và thực hành WebGL+Three.js | Khóa học tiếng Trung có hệ thống gồm 18 chương
Dự án mã nguồn mở — học trực tiếp
Dự án | Lý do đề xuất
aimees-papercraft-world.com | Toàn bộ mã nguồn và mô hình Blender đều mở, là tài liệu học tập tốt nhất
card-3d-animation | Ví dụ tối giản về Remotion + 3D, phù hợp cho lần đầu thực hành
iMoss | 500 nghìn ngọn cỏ + shader tùy chỉnh, hiệu ứng ấn tượng
siri-glsl | Tái tạo ngôn ngữ thiết kế của Apple hoàn toàn bằng shader
Trang web truyền cảm hứng — xem giới hạn ở đâu
Tác phẩm | Từ khóa
bruno-simon.com | Tiêu chuẩn hàng đầu trong ngành về các tác phẩm tương tác Three.js
samsy.ninja | Cyberpunk WebGPU
jordan-breton.com | Đảo nổi 3D, FWA Site of the Day
bilal.show | Kể chuyện 3D điều khiển bằng thao tác cuộn
Tóm tắt
Một câu để tóm tắt những gì bạn vừa đọc:
Trước đây, làm hoạt ảnh 3D cần học Blender, học kết xuất và học lập trình. Giờ đây, bạn chỉ cần một Node.js, một prompt và một ảnh tham khảo.
Hãy tìm một ảnh tham khảo 3D mà bạn yêu thích, chọn một prompt trong mẫu rồi chỉnh sửa đôi chút và đưa cho Claude Code. Khi thấy kết quả trong Studio, hãy chụp và lưu ảnh. Mười phút sau, bạn đã có một hình ảnh 3D do chính mình "mô tả".