TP037

PHIM — Tiệm máy ảnh film

Website tiệm máy ảnh film với 5 model 3D nhìn qua ống ngắm: xoay vòng lấy nét có độ sâu trường ảnh và bokeh thật, đổi khẩu, bấm máy có tiếng màn trập + ảnh lấy liền hiện hình dần; giả lập 4 loại phim, đặt tráng scan, dải phim cuộn ngang.

Điểm nổi bật

Intro lá khẩu 8 cánh mở từ lỗ kim ra toàn màn hình, như ống kính từ f/22 lên f/1.4 — không có số %
Ống ngắm 3D: khung ngắm, vòng lấy nét & khẩu thật — vật trước/sau mờ theo khoảng cách, đèn xa thành bokeh; nút chọn chủ thể để kéo nét tới
Bấm máy: đèn flash, tiếng màn trập tổng hợp, chụp đúng khung hình 3D thành ảnh lấy liền trắng xoá rồi hiện hình dần, đếm số kiểu còn lại
4 loại phim giả lập màu + hạt + quầng đỏ, shop 4 máy 3D, tính tiền tráng scan + ngày trả, dải phim có lỗ răng cưa; song ngữ

Three.js
GLSL post-processing
GLTF + meshopt
Web Audio
Motion
Lenis
Vite
Tripo 3D
GPT Image
3D models
Post-processing
Interactive
Retail

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 tiệm máy ảnh, phòng tráng, studio, nhiếp ảnh gia: ống ngắm 3D có lấy nét và bokeh thật, bấm máy ra ảnh lấy liền, giả lập loại phim, shop máy ảnh 3D, đặt tráng scan và dải phim.

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 ở
`rangefinder`, `slr`, `instant`, `lens`, `canister`	Ống ngắm hero (xếp theo độ sâu)
`rangefinder`, `slr`, `lens`, `instant`	Shop

Vị trí từng model trong ống ngắm: PLACES trong src/viewfinder.js (x, z, kích thước, góc xoay).
GLB ở public/models/, danh sách trong public/models/manifest.json. Chưa có GLB → dùng ảnh + bản đồ độ sâu.
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/viewfinder.js  Cảnh 3D → render target có depth → shader DOF/bokeh, chụp khung hình
src/intro.js       Intro lá khẩu
src/slots.js       Model gắn vào thẻ shop
src/main.js        Lấy nét / khẩu / bấm máy, giả lập phim, shop, đặt tráng scan
src/locales.js     Toàn bộ chữ vi + en

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Độ mờ theo khẩu	`APERTURES`, `AP_BLUR` trong `src/main.js`
Màu từng loại phim	`STOCKS[].filter` (CSS filter)
Giá & sản phẩm	`SHOP`, `LAB`
Độ mạnh bokeh	hệ số `22.0` và giới hạn `14.0` trong shader `src/viewfinder.js`

Ghi chú

Thương hiệu, tên phim, giá là minh hoạ. Tên loại phim được đặt chung chung, không dùng tên thương hiệu phim thật.
Lăn chuột + giữ Shift trên ống ngắm để xoay vòng lấy nét.
Thư viện: Three.js, Motion, Lenis, Vite (MIT). Font Google (OFL).