Xưởng thực hành · Vibe Code 3D

Xe bán tải: từ 4 ảnh concept đến bánh xe lăn thật

Nhật ký dựng một chiếc xe bán tải chạy được trên web. Mô hình sinh bằng Tripo, được tách thành 116 mảnh, rồi code tìm lại 4 bánh xe, đặt tâm xoay đúng trục và cho xe chạy trong three.js. Khung dưới đây là mô hình thật đang chạy.

Đang tải mô hình xe…
DEMO TỰ CHẠY● 4 BÁNH ĐÃ TÁCH
MẢNH TỪ TRIPO116 → 5thân xe + 4 bánh
TAM GIÁC47.567mỗi bánh khoảng 5.300
BÁN KÍNH BÁNH0,41 mchiều dài cơ sở 3,31 m
DUNG LƯỢNG GLB5,9 → 2,9 MBtexture 4K → 2K
Quy trình

Năm chặng từ ảnh đến xe chạy

01Concept

Bốn ảnh chuẩn cho Tripo

Đạt

Trước, sau, trái, phải. Nền trắng, nhìn thẳng không phối cảnh, xe cùng tỉ lệ và cùng độ cao máy ảnh ở cả bốn góc. Ảnh càng sạch thì mesh càng ít méo.

Ảnh concept nhìn từ trước
Trước
Ảnh concept nhìn từ sau
Sau
Ảnh concept nhìn ngang, đầu xe bên trái
Ngang, đầu xe bên trái
Ảnh concept nhìn ngang, đầu xe bên phải
Ngang, đầu xe bên phải
02Tripo · Mesh

Dựng mesh và một bài học về rig

Rig người gắn lên xe: sai hướng

Tripo dựng mesh đẹp, một texture 4K. Nhưng nút Rig của Tripo chỉ có xương người, nên xương tay chân bị kéo vắt ngang thân xe và mọi chuyển động trong thư viện đều làm xe vặn như cao su. Xe là vật cứng: không cần xương, chỉ cần tách bộ phận và xoay từng khối quanh trục của nó.

Tripo gắn xương người lên xe bán tải
Xương người (vệt trắng) bị gắn lên thân xe trong bước Animate
03Tripo · Segment

Tách bộ phận: 116 mảnh, bánh trước vẫn dính

Đạt một phần

Smart Segment chia xe thành 116 mảnh, mỗi màu là một mảnh. Hai bánh sau tách gọn. Hai bánh trước bị nhập chung vào tấm thân hai bên. Cửa xe quá nhiều đường gờ nên tách lỗi, lần này để nguyên cửa.

Kết quả Smart Segment của Tripo
Màu là nhãn phân vùng, không phải màu sơn
04Code · Tách bánh

Tìm lại 4 bánh bằng hình học

Đạt

Script đọc 116 mảnh và lấy ra mọi tam giác nằm trọn trong hình trụ của từng bánh (tâm trục, bán kính 0,41 m, đúng phía trái hoặc phải). Mỗi bánh thành một khối có tâm xoay ngay giữa trục. 112 mảnh còn lại gộp thành thân xe. Đơn vị đổi sang mét, giả định xe dài 5,4 m.

Thân xe26.376
wheel_FL5.282
wheel_FR5.295
wheel_RL5.273
wheel_RR5.341
Bánh trước tô đỏ, bánh sau tô xanh sau khi tách
Kiểm tra: bánh trước đỏ, bánh sau xanh
Bánh trước đã xoay và bẻ lái, không còn mảnh sót
Xoay thử 75°: không còn mảnh lốp sót lại trên thân
05three.js · Chạy

Gắn chuyển động bằng code

Đang chạy ở khung trên cùng
  • Bánh lăn đúng tốc độ: góc quay mỗi khung = quãng đường ÷ bán kính.
  • Hai bánh trước bẻ lái tối đa 32°. Mỗi bánh nằm trong một nhóm riêng: nhóm xoay để bẻ lái, bánh bên trong xoay để lăn, hai trục không lẫn nhau.
  • Xe rẽ theo mô hình xe đạp: bán kính vòng = chiều dài cơ sở ÷ tan(góc lái).
  • Thân xe chúi đầu khi phanh, ngửa khi tăng tốc, nghiêng ra ngoài khi vào cua. Bánh không nghiêng theo, nên nhìn như có giảm xóc.
// mỗi khung hình
speed   += (ga * 7 - speed * 0.35) * dt;
heading += speed / WHEELBASE * Math.tan(steer) * dt;
truck.position.x += Math.sin(heading) * speed * dt;
truck.position.z += Math.cos(heading) * speed * dt;
// bánh lăn: ω = v / r
for (const w of wheels) w.spin.rotation.x += speed / 0.413 * dt;
frontL.rotation.y = frontR.rotation.y = steer;
// giảm xóc giả: chúi khi phanh, nghiêng khi vào cua
body.rotation.x = -accel * 0.006;
body.rotation.z = steer * speed * speed * 0.0009;
Làm tiếp

Ba việc tiếp theo