TP033

Hương Đêm — Nến thơm thủ công

Website nến thơm với 5 model 3D trên bàn gỗ trong bóng tối, chỉ được thắp sáng bởi ngọn lửa shader thật có bóng đổ và đèn theo chuột; intro quẹt diêm, khói hương uốn lượn theo mùi, bộ chọn mùi và mô phỏng lần đốt đầu.

Điểm nổi bật

Intro trong bóng tối: que diêm quẹt qua vỏ diêm, tia lửa bắn, bùng cháy — ánh sáng ấm lan ra thành trang web, không có số %
Hero bàn gỗ tối: nến lọ gốm cháy bằng ngọn lửa shader + đèn điểm nhấp nháy đổ bóng mềm; rê chuột mang thêm một nguồn sáng soi các sản phẩm khác
4 mùi hương với kim tự tháp hương đầu – giữa – cuối, khói uốn lượn đổi màu theo mùi; bộ chọn mùi theo tâm trạng & thời điểm
Shop 5 sản phẩm 3D, mô phỏng vũng sáp lần đốt đầu (cảnh báo đào hầm), xưởng đổ nến, khoảnh khắc trôi ngang; song ngữ

Three.js
GLSL
GLTF + meshopt
Canvas 2D
Motion
Lenis
Vite
Tripo 3D
GPT Image
3D models
Dynamic lighting
Shader
Home & Lifestyle

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 thương hiệu nến thơm, tinh dầu, đồ trang trí nhà: bàn gỗ tối thắp bằng ngọn lửa shader thật, đèn theo chuột, khói hương đổi màu theo mùi, bộ chọn mùi, mô phỏng lần đốt đầu, shop 3D.

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 ở
`candle-jar`	Hero (ngọn nến đang cháy) + shop
`candle-pillar`, `diffuser`, `candle-tin`, `matchbox`	Bàn hero + shop

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 (được “thắp” bằng ánh lửa giả lập).
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

Vị trí ngọn lửa tính theo khung model nến lọ: flame.position.set(-s.x * 0.1, s.y * 0.86 + 0.2, 0.05) trong src/dark-room.js — chỉnh nếu bấc của model bạn lệch.

Cấu trúc

src/dark-room.js  Hero: bàn gỗ, ngọn lửa GLSL, đèn điểm đổ bóng, đèn theo chuột, bố cục sản phẩm (LAYOUT)
src/smoke.js      Khói hương canvas 2D
src/intro.js      Intro quẹt diêm
src/slots.js      Model gắn vào thẻ shop
src/main.js       Shop, mùi hương, bộ chọn mùi, mô phỏng đốt lần đầu
src/locales.js    Toàn bộ chữ vi + en (tên mùi, tầng hương)

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Sản phẩm & giá	`PRODUCTS` trong `src/main.js`
Mùi hương & màu khói	`SCENTS` (+ chữ `s.*` trong `locales.js`)
Luật chọn mùi	`result()`
Độ sáng ngọn lửa	`flameLight.intensity` trong `src/dark-room.js`

Ghi chú

Thương hiệu, mùi, giá là minh hoạ.
Thư viện: Three.js, Motion, Lenis, Vite (MIT). Font Google (OFL).