Three.js from Zero to Senior · Part 15 — The 3D Toolbox: Tools to Create Assets for Three.js

Part 14 đã chỉ cách import một model. Nhưng model đến từ đâu, và bạn nên mở app nào để tạo ra nó? Trước hết, gỡ rối ba từ mà người ta hay dùng lẫn lộn:

• Công cụ (tool) là ứng dụng bạn tạo 3D trong đó — Blender, ZBrush, Substance Painter.
• Định dạng (format) là file bạn xuất ra — glTF/GLB, FBX, OBJ, USD.
• Thư viện (library) là code render nó — Three.js.

Vậy Blender là tool, glTF là format, Three.js là library. Toàn bộ pipeline là: tạo trong tool → xuất glTF → nạp vào Three.js. Tin tốt: gần như mọi tool 3D nghiêm túc đều xuất được glTF (trực tiếp hoặc qua Blender), nên loader ở Part 14 là đích đến chung.

Dù bạn chọn tool nào bên dưới, đầu ra của nó đều kết thúc ở loader này.

Cách tư duy về bộ công cụ

Đừng hỏi “tool 3D nào tốt nhất?” — hãy hỏi “tôi đang làm gì?” Một chi tiết cơ khí, một sinh vật hữu cơ, một chiếc giày scan, và một prop game cách điệu — mỗi thứ có một tool lý tưởng khác nhau. Ba bộ lọc nhanh:

• Đầu ra — nó xuất glTF trực tiếp, hay phải vòng qua Blender?
• Chi phí & độ khó — miễn phí, dễ tiếp cận (Blender) vs trả phí, chuyên sâu (Maya, Houdini, ZBrush).
• Topology nhận lại — quad sạch để animate, hay “súp tam giác” dày phải dọn (scan, AI, sculpt).

DCC đa năng — bắt đầu ở đây

Một DCC (app tạo nội dung số) làm model, UV, texture, rig và animate trong một chỗ. Đây là nhóm bạn nên học đầu tiên.

Tool	Cost	Why / when	glTF
Blender	Free	The default for web/indie. Full pipeline, huge community, native glTF export.	Direct
Maya	Paid	Studio standard for rigging/animation.	Via plugin
Cinema 4D	Paid	Motion-graphics friendly.	Via export
3ds Max	Paid	Arch-viz / games on Windows.	Via plugin

Khuyến nghị: học Blender. Nó miễn phí, xuất glTF gốc, và mọi tool khác đều có thể chuyển giao cho nó. Phần Blender bạn cần cho Three.js chỉ là một lát nhỏ: dựng khối, gán material Principled, unwrap UV, xuất .glb (đã có ở Part 14).

Điêu khắc — hình hữu cơ

Cho nhân vật, sinh vật và mọi thứ “nặn bằng tay”, bạn đẩy hàng triệu polygon như đất sét số.

• ZBrush — vua điêu khắc của ngành (trả phí).
• Blender Sculpt Mode — miễn phí, quá đủ để bắt đầu.
• Nomad Sculpt — tuyệt trên iPad (trả phí, rẻ).

Điểm vướng: bản điêu khắc high-poly, không dùng thô trên web được. Bạn phải retopo (dựng lại mesh low-poly đè lên) và bake chi tiết vào normal map — rồi xuất low-poly + map ra glTF.

CAD & độ chính xác bề mặt cứng

Khi kích thước phải chính xác — một cái ke, một cái điện thoại, một bản render sản phẩm — hãy dùng CAD.

• Fusion 360, Onshape (trên trình duyệt), FreeCAD (miễn phí), Plasticity (CAD thân thiện với artist).

CAD tạo bề mặt hoàn hảo nhưng tam giác hoá dày, không đều khi xuất. Xuất ra mesh (STEP → Blender, hoặc glTF nếu hỗ trợ), rồi decimate trước khi ship.

Procedural — sinh hình học bằng quy tắc

Thay vì đặt từng đỉnh, bạn mô tả quy tắc dựng hình — lý tưởng cho biến thể, rải vật, lặp phức tạp.

• Houdini — trùm procedural (trả phí; có bản Apprentice miễn phí).
• Blender Geometry Nodes — miễn phí, dạng node, xuất ra hình học bình thường.

Bạn vẫn phải apply/bake kết quả thành mesh thật trước khi xuất glTF.

Scan & photogrammetry — thế giới thật

Biến ảnh chụp hoặc quét LiDAR một vật thật thành mesh 3D.

• Polycam, Luma AI — chạy trên điện thoại, nhanh, dễ cho người mới.
• RealityCapture, Metashape — desktop, chất lượng studio.

Đầu ra lớn và lộn xộn (hàng triệu tam giác, ánh sáng bị nướng vào). Coi nó là nguyên liệu thô: retopo, bake, và khử sáng (bỏ bóng đã nướng) trước khi sẵn sàng cho web.

Sinh bằng AI — chữ/ảnh → mesh

Nhóm mới nhất: mô tả vật thể hoặc tải ảnh lên và nhận mesh trong vài giây.

• Meshy, Tripo, Rodin, Luma Genie — nhiều cái xuất glTF trực tiếp.

Tốt cho prototype và prop nền; hãy dè chừng với asset chủ đạo. Cảnh giác topology lộn xộn, sai tỉ lệ, và điều khoản bản quyền/sở hữu — luôn kiểm tra trước khi dùng thương mại.

Texturing — làm bề mặt trông thật

Modeling tạo hình; texturing làm nó đáng tin. Các tool này vẽ map PBR (base color, roughness, metalness, normal, AO) mà bảng material ở Part 14 dùng đến.

• Substance 3D Painter — vẽ texture trực tiếp lên model (chuẩn ngành, trả phí).
• Substance 3D Designer — tạo material procedural, lát được.
• Quixel Mixer / ArmorPaint — lựa chọn miễn phí/rẻ hơn.

Xuất map, cắm vào Principled BSDF của Blender (hoặc gán trong Three.js), và chúng đi kèm trong .glb.

Tool trên web — thiết kế trong trình duyệt

Không cần cài, và vài cái “nói” Three.js sẵn.

• Spline — thiết kế 3D trên trình duyệt, xuất glTF hoặc code React/Three.js. Nhanh cho 3D giao diện và landing page.
• Womp — modeling kiểu metaball dễ thương, xuất glTF.
• Blockbench — miễn phí, hợp asset game low-poly / voxel, xuất glTF.
• three.js editor — lắp scene và soi glTF ngay trong engine.

Đừng tự dựng — mua hoặc mượn

Asset nhanh nhất là cái bạn không phải làm. Marketplace và thư viện miễn phí là cách hầu hết dự án lấp đầy một scene:

• Poly Haven — HDRI, texture, model CC0 (miễn phí thật sự).
• Quaternius, Kenney — gói game cách điệu/low-poly CC0.
• Sketchfab — thư viện khổng lồ, tải glTF, giấy phép hỗn hợp.
• Khronos Sample Assets — các model thử nghiệm trong demo.

Luôn kiểm tra giấy phép trước khi ship. CC0 = làm gì cũng được; CC-BY = ghi công tác giả; “royalty-free” ≠ “không ràng buộc”.

Tôi nên chọn cái nào?

I’m making…	Reach for	Then
A general prop / scene	Blender	export .glb
A character / creature	ZBrush or Blender Sculpt	retopo + bake → Blender → glTF
A precise product / part	Fusion 360 / FreeCAD	mesh → Blender → decimate → glTF
A real object	Polycam / RealityCapture	retopo + bake → glTF
A quick prototype	Meshy / Tripo (AI)	clean up → glTF
Realistic surfaces	Substance Painter	maps → Blender → glTF
Browser-native 3D	Spline / Blockbench	export glTF directly
”Just give me something”	Poly Haven / Sketchfab	download glTF, check license

Asset đầu tiên, từ đầu đến cuối

Bạn không cần một khoá học để ship được gì đó hôm nay. Trong Blender:

1. Shift+A → Mesh → Cube. Tab vào Edit Mode.
2. Chọn hết (A), rồi Ctrl+B để bevel cạnh — trông “có thiết kế” ngay.
3. Tab ra, thêm material, đặt Base Color và Roughness.
4. Ctrl+A → All Transforms (làm sạch transform).
5. File → Export → glTF 2.0 → glTF Binary (.glb), bật +Y Up.
6. Thả .glb vào loader ở Part 14 — nó hiện ra, có sáng và đứng trên sàn.

Vòng lặp đó — tạo, xuất, nạp — chính là toàn bộ công việc. Phần còn lại chỉ là tinh chỉnh.

Lời cảnh báo của bậc thầy

• Đừng nhảy tool. Chọn Blender, ship năm asset, rồi mới khám phá. Rộng mà không sâu thì chẳng ra gì.
• Web trừng phạt asset thô. Bản điêu khắc, scan, mesh AI chỉ là điểm xuất phát — phải retopo, bake, decimate.
• Bản quyền là rủi ro thật. “Tìm thấy trên Google” không phải giấy phép.
• Mọi nẻo đường đều dẫn tới glTF. Nếu một tool không xuất glTF trực tiếp, gần như luôn đi vòng qua Blender được.

Thực hành

1. Làm bài tập Blender 6 bước ở trên và nạp .glb của bạn vào demo Part 14.
2. Tải một model CC0 từ Poly Haven và một từ Sketchfab; so kích thước file và số tam giác trong chỉ số của loader.
3. Thử một bộ sinh AI (Meshy/Tripo), xuất glTF, và ghi lại topology sai chỗ nào.

Tiếp theo

Giờ bạn có thể tạo hoặc tìm asset và nạp chúng. Nhiều cái sẽ quá nặng — nhất là bản điêu khắc, scan, mesh AI. Ở Part 16 ta làm chúng nhẹ cho production: nén hình học Draco và Meshopt và texture GPU KTX2 bằng CLI gltf-transform — thường nhỏ hơn 5–10× mà không mất chất lượng, và loader ở Part 14 đã nối sẵn decoder.