TP038

Cánh Diều — Drone gấp gọn

Trang sản phẩm drone với 4 model 3D: người xem tự lái drone bằng chuột hoặc W A S D qua ruộng bậc thang dựng 3D từ ảnh flycam, có nghiêng cánh, quán tính, 3 chế độ bay và bảng đo độ cao/tốc độ/pin; radar né vật cản bấm để thả chướng ngại.

Điểm nổi bật

Intro khởi động bộ điều khiển bay: tâm ngắm tự vẽ, đường chân trời lắc rồi cân bằng, la bàn trượt, checklist IMU · GPS · gimbal · link xanh dần
Hero lái thử: drone 3D bám theo chuột hoặc phím, nghiêng khi rẽ, cảnh ruộng bậc thang Mù Cang Chải có chiều sâu thật; rời chuột thì tự bay số 8
Chế độ Cine / Normal / Sport đổi tốc độ và góc ống kính; telemetry độ cao, tốc độ, quãng đường, pin cập nhật trực tiếp
Bộ sản phẩm 3D (drone, tay điều khiển, pin, vali), radar né vật cản, 3 ứng dụng, khoá học bay, 3 bộ bán; song ngữ

Three.js
GLTF + meshopt
Canvas 2D
Motion
Lenis
Vite
Tripo 3D
GPT Image
Depth Anything V2
3D models
Interactive
Tech product
Game-like

Trong gói tải về

Toàn bộ source code template (chạy bằng Vite, build ra web tĩnh — host ở bất kỳ đâu)
PROMPT.md — prompt để dựng lại / mở rộng trang bằng AI builder
README.md — hướng dẫn chạy & tuỳ biến (chính là nội dung bên dưới)

Website song ngữ (VI/EN) cho drone, thiết bị bay, sản phẩm công nghệ: lái thử drone 3D qua cảnh ruộng bậc thang có chiều sâu, chế độ bay, telemetry, bộ sản phẩm 3D, radar né vật cản, ứng dụng, khoá học và bộ bán.

Chạy thử

npm install
npm run dev       # http://localhost:5173
npm run build     # xuất bản tĩnh vào dist/

Mặc định tiếng Việt; thêm ?lang=en để mở tiếng Anh.

Model 3D

Model	Dùng ở
`drone`	Hero lái thử + bộ sản phẩm
`controller`, `battery`, `case`	Bộ sản phẩm

Với GLB thật, 4 đĩa mờ cánh quạt được gắn tự động ở 4 góc trên của model (chỉnh trong src/flight.js nếu drone của bạn khác dáng).
Cảnh nền: images/terraces.webp + terraces-depth.webp (ảnh mới: node scripts/depth-map.mjs anh.png public/images/terraces-depth.webp).
Tạo model mới từ ảnh: dùng Image to 3D của Meshy (bật texture PBR), tải về định dạng GLB.
Thay model: đặt GLB gốc vào assets-in/models/<tên>.glb, rồi:

npm i -D @gltf-transform/core @gltf-transform/extensions @gltf-transform/functions meshoptimizer sharp
node scripts/optimize-models.mjs

Cấu trúc

src/flight.js   Hero: cảnh relief, drone, điều khiển chuột/phím, tự lái, camera bám, telemetry
src/radar.js    Radar né vật cản (canvas 2D)
src/intro.js    Intro HUD khởi động
src/slots.js    Model gắn vào thẻ bộ sản phẩm
src/main.js     Chế độ bay, ứng dụng, bộ bán
src/locales.js  Toàn bộ chữ vi + en

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Tốc độ / góc ống kính từng chế độ	`MODES` trong `src/flight.js`
Vùng bay cho phép	các `clamp` của `target`
Công thức telemetry	`onTelemetry` trong `src/flight.js`
Ứng dụng & số liệu	`USES` trong `src/main.js`

Ghi chú

Thương hiệu, thông số, giá là minh hoạ. Khi bán drone thật cần ghi rõ quy định bay tại Việt Nam.
Thư viện: Three.js, Motion, Lenis, Vite (MIT). Font Google (OFL).