TP032

Miền Trái — Xuất khẩu trái cây

Website doanh nghiệp xuất khẩu nông sản với 6 model 3D: trái cây bay quỹ đạo quanh tiêu đề, cuộn tới đâu “bổ” thanh long tới đó — quả nguyên tan ra thành nửa quả kèm nước bắn và chỉ số Brix; bánh xe mùa vụ, biểu đồ chuỗi lạnh và máy tính container lạnh.

Điểm nổi bật

Intro một bụi lá nhiệt đới phủ kín màn hình rồi bị vén sang hai bên như bước vào vườn — không có số %
Hero 5 loại trái 3D bay theo quỹ đạo elip quanh tiêu đề, nghiêng theo chuột, kéo để quay nhanh
Kiểm định theo cuộn: lưỡi dao sáng quét qua, thanh long nguyên tan biến thành nửa quả, nước bắn, Brix đếm lên 14,2°
Thẻ sản phẩm 3D có Brix / nhiệt độ / thùng, bánh xe mùa vụ 12 tháng, đường nhiệt độ chuỗi lạnh, tính container 20'/40' FOB/CIF, tỉ trọng thị trường; song ngữ

Three.js
GLTF + meshopt
SVG
Motion
Lenis
Vite
Tripo 3D
GPT Image
3D models
B2B
Scroll story
Calculator

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 doanh nghiệp xuất khẩu trái cây, nông sản, thực phẩm B2B: trái cây 3D bay quỹ đạo, đoạn cuộn “bổ quả kiểm định”, thẻ sản phẩm 3D, bánh xe mùa vụ, chuỗi lạnh, máy tính container và tỉ trọng thị trường.

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 ở
`mango`, `dragon-fruit`, `durian`, `mangosteen`, `coconut`	Quỹ đạo hero + thẻ sản phẩm
`dragon-fruit` → `dragon-half`	Đoạn “bổ quả” (quả nguyên tan thành nửa quả)

GLB ở public/models/, danh sách trong public/models/manifest.json. Chưa có GLB → tự dùng ảnh + bản đồ độ sâu làm bản tạm.
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

Đổi sang loại trái khác cho đoạn “bổ quả”: tạo 2 model (nguyên + cắt đôi) và truyền tên vào createSlice(…, { whole, half }) trong src/main.js.

Cấu trúc

src/orbit.js    Hero: trái cây bay quỹ đạo elip
src/slice.js    Đoạn kiểm định tua theo cuộn: dao quét, tan quả, nước bắn
src/intro.js    Intro lá cây vén ra
src/slots.js    Model gắn vào thẻ sản phẩm
src/main.js     Dữ liệu trái cây, bánh xe mùa vụ, chuỗi lạnh, máy tính container, thị trường
src/locales.js  Toàn bộ chữ vi + en

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Sản phẩm, tháng mùa vụ, nhiệt độ, thùng, giá FOB	`FRUITS` trong `src/main.js`
Số pallet mỗi container	`BOXES` (20' = 10, 40' = 20)
Hệ số CIF	`* 1.18` trong `renderQuote()`
Đường nhiệt độ chuỗi lạnh	`tempPts`
Tỉ trọng thị trường	`MARKETS`

Ghi chú

Doanh nghiệp, sản lượng, giá và tỉ trọng là minh hoạ; máy tính chỉ ước tính để khách tham khảo, form báo giá cần backend/CRM.
Thư viện: Three.js, Motion, Lenis, Vite (MIT). Font Google (OFL).