TP035

Nụ Cười — Nha khoa thẩm mỹ

Website nha khoa với 4 model 3D: răng hàm dưới máy quét — nửa trên răng thật, nửa dưới X-quang phát sáng, tia quét theo chuột; dịch vụ 3D (implant, khay niềng, bàn chải), mô phỏng 24 tuần niềng trong suốt, thang màu tẩy trắng, bảng giá và đặt lịch.

Điểm nổi bật

Không màn chờ — nội dung hiện mờ-rõ nhẹ nhàng trong khi răng 3D “được quét” từ dưới lên (đúng chất phòng khám sạch sẽ)
Máy quét X-quang: cùng một model vẽ 2 lần cắt theo đường quét — trên là răng thật, dưới là X-quang fresnel có vân quét; rê chuột để kéo tia
3 dịch vụ với model 3D trong thẻ; niềng trong suốt 24 tuần: kéo thanh để 12 chiếc răng lệch trở về cung chuẩn
Thang màu VITA tẩy trắng theo số buổi, bảng giá + FAQ, đặt lịch chọn ngày/giờ trống; song ngữ

Three.js
GLSL
GLTF + meshopt
SVG
Motion
Lenis
Vite
Tripo 3D
GPT Image
3D models
Healthcare
Booking
Shader

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 nha khoa, phòng khám, spa y tế: máy quét X-quang 3D tương tác, dịch vụ có model 3D, mô phỏng niềng răng trong suốt, thang màu tẩy trắng, bảng giá, FAQ và đặt lịch.

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 ở
`tooth`	Máy quét X-quang ở hero
`implant`, `aligner`, `toothbrush`	Thẻ dịch vụ

GLB ở public/models/, danh sách trong public/models/manifest.json. Chưa có GLB → dùng ảnh + bản đồ độ sâu (phần X-quang hiện dạng bóng xanh).
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/xray.js      Hero: render 2 lượt (scissor) theo tia quét, vật liệu X-quang fresnel
src/slots.js     Model gắn vào thẻ dịch vụ
src/main.js      Dịch vụ, cung răng niềng (SVG), thang màu, bảng giá, đặt lịch
src/locales.js   Toàn bộ chữ vi + en

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Dịch vụ	`SERVICES` + `sv.*` trong `locales.js` (danh sách ngăn bằng `	`)
Bảng giá	`PRICES`
Khung giờ khám	`TIMES`; giờ bận đang giả lập ở `busy()` — thay bằng API lịch
Thang màu	`SHADES`
Màu tia X-quang	`uColor` trong `src/xray.js`

Ghi chú

Phòng khám, bác sĩ, giá, thông tin y khoa là minh hoạ. Khi dùng thật cần tuân thủ quy định quảng cáo dịch vụ y tế.
Thư viện: Three.js, Motion, Lenis, Vite (MIT). Font Google (OFL).