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

Part 14 showed how to import a model. {Part 14 đã chỉ cách import một model.} But where do models come from, and which app should you actually open to make one? {Nhưng model đến từ đâu, và bạn nên mở app nào để tạo ra nó?} First, untangle three words people use interchangeably and shouldn’t: {Trước hết, gỡ rối ba từ mà người ta hay dùng lẫn lộn:}

• A tool is an application you create 3D in — Blender, ZBrush, Substance Painter. {Công cụ (tool) là ứng dụng bạn tạo 3D trong đó — Blender, ZBrush, Substance Painter.}
• A format is the file you export — glTF/GLB, FBX, OBJ, USD. {Định dạng (format) là file bạn xuất ra — glTF/GLB, FBX, OBJ, USD.}
• A library is the code that renders it — Three.js. {Thư viện (library) là code render nó — Three.js.}

So Blender is a tool, glTF is a format, Three.js is a library. {Vậy Blender là tool, glTF là format, Three.js là library.} The whole pipeline is: create in a tool → export to glTF → load in Three.js. {Toàn bộ pipeline là: tạo trong tool → xuất glTF → nạp vào Three.js.} The good news: almost every serious 3D tool can output glTF (directly or via Blender), so the loader from Part 14 is your universal destination. {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.}

No matter which tool below you choose, its output ends up here. {Dù bạn chọn tool nào bên dưới, đầu ra của nó đều kết thúc ở đây.} Open the loader {Mở loader}: /tools/threejs-gltf-import-demo/.

How to think about the toolbox {Cách tư duy về bộ công cụ}

Don’t ask “what’s the best 3D tool?” — ask “what am I making?” {Đừng hỏi “tool 3D nào tốt nhất?” — hãy hỏi “tôi đang làm gì?”} A mechanical part, an organic creature, a scanned shoe and a stylized game prop each have a different ideal tool. {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.} Three quick filters: {Ba bộ lọc nhanh:}

• Output — does it export glTF directly, or must you round-trip through Blender? {Đầu ra — nó xuất glTF trực tiếp, hay phải vòng qua Blender?}
• Cost & learning curve — free and approachable (Blender) vs paid and deep (Maya, Houdini, ZBrush). {Chi phí & độ khó — miễn phí, dễ tiếp cận (Blender) vs trả phí, chuyên sâu (Maya, Houdini, ZBrush).}
• Topology you get back — clean quads you can animate, or a dense triangle soup you must clean up (scans, AI, sculpts). {Topology nhận lại — quad sạch để animate, hay “súp tam giác” dày phải dọn (scan, AI, sculpt).}

General-purpose DCC — start here {DCC đa năng — bắt đầu ở đây}

A DCC (Digital Content Creation app) models, UVs, textures, rigs and animates in one place. {Một DCC (app tạo nội dung số) làm model, UV, texture, rig và animate trong một chỗ.} This is the category you should learn first. {Đâ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

Recommendation: learn Blender. {Khuyến nghị: học Blender.} It’s free, exports glTF natively, and every other tool can hand off to it. {Nó miễn phí, xuất glTF gốc, và mọi tool khác đều có thể chuyển giao cho nó.} The basics you need for Three.js are a small slice of Blender: box-model a shape, give it a Principled material, UV unwrap, export .glb (all covered in Part 14). {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).}

Sculpting — organic shapes {Điêu khắc — hình hữu cơ}

For characters, creatures and anything “sculpted by hand”, you push millions of polygons like digital clay. {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 — the industry sculpting king (paid). {ZBrush — vua điêu khắc của ngành (trả phí).}
• Blender Sculpt Mode — free, more than enough to start. {Blender Sculpt Mode — miễn phí, quá đủ để bắt đầu.}
• Nomad Sculpt — excellent on iPad (paid, cheap). {Nomad Sculpt — tuyệt trên iPad (trả phí, rẻ).}

The catch: sculpts are high-poly and unusable raw on the web. {Điểm vướng: bản điêu khắc high-poly, không dùng thô trên web được.} You retopologize (rebuild a low-poly mesh over it) and bake the detail into a normal map — then export the low-poly + maps to glTF. {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 & hard-surface precision {CAD & độ chính xác bề mặt cứng}

When dimensions must be exact — a bracket, a phone, a product render — use CAD. {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 (paid, free for hobby), Onshape (browser), FreeCAD (free), Plasticity (artist-friendly CAD). {Fusion 360, Onshape (trên trình duyệt), FreeCAD (miễn phí), Plasticity (CAD thân thiện với artist).}

CAD produces perfect surfaces but dense, irregular triangulation on export. {CAD tạo bề mặt hoàn hảo nhưng tam giác hoá dày, không đều khi xuất.} Export to a mesh (STEP → Blender, or glTF where supported), then decimate before shipping. {Xuất ra mesh (STEP → Blender, hoặc glTF nếu hỗ trợ), rồi decimate trước khi ship.}

Procedural — generate geometry with rules {Procedural — sinh hình học bằng quy tắc}

Instead of placing vertices, you describe rules that build geometry — ideal for variations, scattering, and complex repetition. {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 — the procedural powerhouse (paid; free Apprentice). {Houdini — trùm procedural (trả phí; có bản Apprentice miễn phí).}
• Blender Geometry Nodes — free, node-based, exports as normal geometry. {Blender Geometry Nodes — miễn phí, dạng node, xuất ra hình học bình thường.}

You still apply/bake the result to real mesh data before glTF export. {Bạn vẫn phải apply/bake kết quả thành mesh thật trước khi xuất glTF.}

Scanning & photogrammetry — the real world {Scan & photogrammetry — thế giới thật}

Turn photos or a LiDAR sweep of a real object into a 3D mesh. {Biến ảnh chụp hoặc quét LiDAR một vật thật thành mesh 3D.}

• Polycam, Luma AI — phone-based, fast, beginner-friendly. {Polycam, Luma AI — chạy trên điện thoại, nhanh, dễ cho người mới.}
• RealityCapture, Metashape — desktop, studio-grade. {RealityCapture, Metashape — desktop, chất lượng studio.}

Output is huge and messy (millions of tris, baked-in lighting). {Đầu ra lớn và lộn xộn (hàng triệu tam giác, ánh sáng bị nướng vào).} Treat it as raw material: retopo, bake, and delight (remove baked shadows) before it’s web-ready. {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.}

AI generation — text/image → mesh {Sinh bằng AI — chữ/ảnh → mesh}

The newest category: describe an object or upload an image and get a mesh in seconds. {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 — many export glTF directly. {Meshy, Tripo, Rodin, Luma Genie — nhiều cái xuất glTF trực tiếp.}

Great for prototyping and background props; be skeptical for hero assets. {Tốt cho prototype và prop nền; hãy dè chừng với asset chủ đạo.} Watch messy topology, odd scale, and licensing/ownership terms — always verify before shipping commercially. {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 — making surfaces look real {Texturing — làm bề mặt trông thật}

Modeling makes the shape; texturing makes it believable. {Modeling tạo hình; texturing làm nó đáng tin.} These tools paint the PBR maps (base color, roughness, metalness, normal, AO) that Part 14’s material table consumes. {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 — paint textures directly on the model (industry standard, paid). {Substance 3D Painter — vẽ texture trực tiếp lên model (chuẩn ngành, trả phí).}
• Substance 3D Designer — author procedural, tileable materials. {Substance 3D Designer — tạo material procedural, lát được.}
• Quixel Mixer / ArmorPaint — free/cheaper alternatives. {Quixel Mixer / ArmorPaint — lựa chọn miễn phí/rẻ hơn.}

Export the maps, plug them into the Blender Principled BSDF (or assign in Three.js), and they ride along inside the .glb. {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.}

Web-based tools — design in the browser {Tool trên web — thiết kế trong trình duyệt}

No install, and several speak Three.js natively. {Không cần cài, và vài cái “nói” Three.js sẵn.}

• Spline — design 3D in-browser, export glTF or React/Three.js code. Fast for UI 3D and landing pages. {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 — friendly metaball-based modeling, glTF export. {Womp — modeling kiểu metaball dễ thương, xuất glTF.}
• Blockbench — free, perfect for low-poly / voxel game assets, glTF export. {Blockbench — miễn phí, hợp asset game low-poly / voxel, xuất glTF.}
• three.js editor (editor) — assemble scenes and inspect glTF right in the engine. {three.js editor — lắp scene và soi glTF ngay trong engine.}

Don’t model it — buy or borrow it {Đừng tự dựng — mua hoặc mượn}

The fastest asset is one you didn’t make. {Asset nhanh nhất là cái bạn không phải làm.} Marketplaces and free libraries are how most projects fill a scene: {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 — CC0 (truly free) HDRIs, textures, models. {Poly Haven — HDRI, texture, model CC0 (miễn phí thật sự).}
• Quaternius, Kenney — CC0 stylized/low-poly game packs. {Quaternius, Kenney — gói game cách điệu/low-poly CC0.}
• Sketchfab — massive library, glTF download, mixed licenses. {Sketchfab — thư viện khổng lồ, tải glTF, giấy phép hỗn hợp.}
• Khronos Sample Assets — the test models in our demo. {Khronos Sample Assets — các model thử nghiệm trong demo.}

Always check the license before you ship. {Luôn kiểm tra giấy phép trước khi ship.} CC0 = do anything; CC-BY = credit the author; “royalty-free” ≠ “no rules”. {CC0 = làm gì cũng được; CC-BY = ghi công tác giả; “royalty-free” ≠ “không ràng buộc”.}

Which should I pick? {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

Your first asset, end to end {Asset đầu tiên, từ đầu đến cuối}

You don’t need a course to ship something today. {Bạn không cần một khoá học để ship được gì đó hôm nay.} In Blender: {Trong Blender:}

1. Shift+A → Mesh → Cube. Tab into Edit Mode. {Shift+A → Mesh → Cube. Tab vào Edit Mode.}
2. Select all (A), then Ctrl+B to bevel the edges — instant “designed” look. {Chọn hết (A), rồi Ctrl+B để bevel cạnh — trông “có thiết kế” ngay.}
3. Tab back, add a material, set a Base Color and Roughness. {Tab ra, thêm material, đặt Base Color và Roughness.}
4. Ctrl+A → All Transforms (clean transforms). {Ctrl+A → All Transforms (làm sạch transform).}
5. File → Export → glTF 2.0 → glTF Binary (.glb), +Y Up on. {File → Export → glTF 2.0 → glTF Binary (.glb), bật +Y Up.}
6. Drop the .glb into the Part 14 loader — it appears, lit and grounded. {Thả .glb vào loader ở Part 14 — nó hiện ra, có sáng và đứng trên sàn.}

That loop — make, export, load — is the entire job. {Vòng lặp đó — tạo, xuất, nạp — chính là toàn bộ công việc.} Everything else is refinement. {Phần còn lại chỉ là tinh chỉnh.}

Master’s warnings {Lời cảnh báo của bậc thầy}

• Don’t tool-hop. Pick Blender, ship five assets, then explore. Breadth without depth makes nothing. {Đừ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ì.}
• The web punishes raw assets. Sculpts, scans and AI meshes are starting points — retopo, bake, decimate before they touch a browser. {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.}
• Licensing is a real risk. “Found on Google” is not a license. Verify CC0/CC-BY/commercial terms. {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.}
• All roads lead to glTF. If a tool can’t reach glTF directly, it can almost always go through Blender. {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.}

Practice {Thực hành}

1. Do the six-step Blender exercise above and load your .glb in the Part 14 demo. {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. Download one CC0 model from Poly Haven and one from Sketchfab; compare file size and triangle count in the loader’s readout. {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. Try one AI generator (Meshy/Tripo), export glTF, and note what’s wrong with the topology. {Thử một bộ sinh AI (Meshy/Tripo), xuất glTF, và ghi lại topology sai chỗ nào.}

What’s next {Tiếp theo}

You can now create or source assets and load them. {Giờ bạn có thể tạo hoặc tìm asset và nạp chúng.} Many will be too big — sculpts, scans and AI meshes especially. {Nhiều cái sẽ quá nặng — nhất là bản điêu khắc, scan, mesh AI.} In Part 16 we make them production-light: Draco and Meshopt geometry compression and KTX2 GPU textures via the gltf-transform CLI — often 5–10× smaller with no visible quality loss, and the loader from Part 14 already has the decoders wired in. {Ở 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.}