Bài tập WebGL · Three.js

Trình xem sản phẩm 360°

Một mô hình trang phục 3D chạy thẳng trong trình duyệt: kéo để xoay, cuộn để phóng to, bấm để đổi màu vải. Không cài phần mềm, không plugin, không tài khoản — chỉ một tệp HTML, một cặp tệp mô hình và thư viện Three.js. Bài tập này trả lời một câu hỏi rất cụ thể: một trang bán hàng có thể cho khách xoay món đồ trong tay mà vẫn nhẹ, vẫn mở được trên máy yếu hay không.

GREENWEAVE là một thương hiệu giả định. Mình dựng nó ra để có bối cảnh thật khi thử nghiệm — tên gọi, mô tả vải và mọi thông số bên dưới đều là nội dung minh hoạ. Trang này không bán gì và không nhận đơn hàng.

Mô hình 3D là một tấm áo khoác dài low-poly dựng sẵn trong Blender. Nó không phải áo phông; mình để nguyên hình dáng thật của lưới mô hình thay vì gọi nó là một thứ khác cho khớp với lời quảng cáo.

Thử ngay

Xoay thử

Kéo chuột hoặc vuốt để xoay. Cuộn hoặc chụm hai ngón để phóng to. Nếu bạn dùng bàn phím, các nút ngay dưới khung làm đúng những việc mà con chuột làm.

Ảnh mẫu áo khoác dệt GREENWEAVE trên nền trung tính, nhìn từ phía trước.

Áo khoác dệt hữu cơ GREENWEAVE

Mẫu áo khoác dài, dệt từ sợi bông hữu cơ, đường cắt thẳng và không có chi tiết thừa. Toàn bộ hình khối bạn thấy trong khung bên là lưới đa giác thật của mô hình, phủ một lớp vân dệt sinh ra bằng mã ngay lúc trang chạy — không có tệp ảnh vân vải nào phải tải về.

Màu vải

Đang chọn: Xanh rừng

Bàn phím: Tab tới khung xem rồi dùng ← → để xoay, ↑ ↓ để ngẩng và cúi, + − để phóng to thu nhỏ, 0 để về góc ban đầu. Nếu hệ điều hành của bạn đang bật chế độ giảm chuyển động, mô hình sẽ đứng yên cho tới khi bạn chủ động xoay nó.

Thông số

Sản phẩm giả định

Bảng dưới đây là nội dung minh hoạ, dùng để kiểm tra xem bố cục chịu được bao nhiêu chữ trước khi vỡ.

Chất liệu: 100% bông hữu cơ, dệt thoi hai lớp
Định lượng: 280 g/m²
Màu: Bốn màu nhuộm gốc thực vật: xanh rừng, xanh biển, nâu đất, xám trời
Cỡ: XS · S · M · L · XL
Bảo quản: Giặt máy nước lạnh, phơi ngang, không dùng máy sấy
Xuất xứ: Dệt và may tại Việt Nam

Chi tiết

Ba khối mở rộng

Bản cũ của trang này dùng JavaScript để đóng mở ba khối dưới đây, và đoạn mã đó bắt nhầm mọi nút bấm trên trang. Giờ chúng là thẻ <details> của chính HTML: không một dòng script, không thể hỏng, và tìm kiếm trong trang vẫn thấy được nội dung đang đóng.

Chi tiết sản phẩm

Áo khoác dài dệt thoi hai lớp, thân suông, không chiết eo. Cổ dựng thấp, nẹp khuất, hai túi dọc sườn. Đường may kép ở vai và sườn để chịu lực.

Vải mộc không tẩy trắng, giữ lại chút sắc kem tự nhiên của sợi bông. Sau vài lần giặt, mặt vải mềm xuống và bám dáng người hơn.

Vận chuyển và đổi trả

Đây là nội dung minh hoạ cho một cửa hàng không tồn tại. Trong một trang thật, phần này sẽ nêu rõ thời gian giao, phí vận chuyển theo vùng, và thời hạn đổi trả tính từ ngày nhận hàng.

Mình giữ nguyên khối này trong bài tập vì nó là chỗ nhiều chữ nhất trên trang — nếu bố cục chịu được nó thì chịu được phần còn lại.

Vì sao lại là 3D

Ảnh chụp cho biết món đồ trông thế nào ở một góc. Mô hình 3D cho biết nó trông thế nào ở mọi góc, và người xem tự chọn góc mình quan tâm. Với quần áo, thứ người ta muốn nhìn thường là mặt sau và đường vai — hai chỗ ảnh sản phẩm hay bỏ qua.

Cái giá phải trả là dung lượng và điện năng. Vì thế trang này chỉ dựng hình khi khung xem thực sự nằm trong tầm mắt, và dừng hẳn khi bạn chuyển sang thẻ khác.

Ghi chú kỹ thuật

Trang này được dựng thế nào

Thư viện: Three.js ghim cứng ở phiên bản r180. Không dùng dải phiên bản, không dùng bản “mới nhất” — một trang chạy được hôm nay thì vài năm nữa vẫn phải chạy đúng như thế.
Cách nạp: Nạp bằng <script type="module"> nên mặc định đã hoãn lại tới sau khi HTML dựng xong, và thư viện chỉ thực sự được tải khi khung xem lọt vào tầm nhìn. Trang hiện chữ trước, đồ hoạ sau.
Mô hình: Một cặp .obj + .mtl xuất từ Blender, nằm cùng thư mục với trang và được gọi bằng đúng tên tệp trần. Chương trình tự tính hộp bao của lưới rồi căn giữa và co giãn về vừa khung, nên đổi sang mô hình khác cũng không phải chỉnh tay.
Vân vải: Tệp .mtl trỏ tới một ảnh vân chưa từng có trong kho. Thay vì để trình duyệt đi xin một tệp không tồn tại, trình nạp được cài một bộ đổi hướng: khi thấy tên ảnh đó, nó trả về một vân dệt vẽ bằng <canvas> ngay tại chỗ. Không thêm một yêu cầu mạng nào.
Khi không có WebGL: Ảnh tĩnh và lời giải thích là trạng thái mặc định nằm sẵn trong HTML; mô hình chỉ thay chỗ chúng sau khi đã dựng xong khung hình đầu tiên. Nghĩa là máy không có WebGL, trình duyệt tắt JavaScript, hay mạng chặn thư viện đều rơi vào cùng một trạng thái tử tế chứ không phải một ô trống.
Tiết kiệm pin: Vòng lặp dựng hình dừng khi khung xem ra khỏi màn hình hoặc khi bạn đổi thẻ trình duyệt. Nếu hệ điều hành đang bật chế độ giảm chuyển động, mô hình không tự quay.
Đã gỡ khỏi bản cũ: Bốn nguồn bên ngoài rút xuống còn một. Bộ khung CSS dựng sẵn, bộ icon web font bên thứ ba và các ảnh giữ chỗ lấy từ dịch vụ ngoài đều được thay bằng CSS của chính trang và bộ icon SVG tự chứa.

Mã nguồn nằm ngay trong tệp này — bấm Ctrl + U là đọc được toàn bộ, không có bước dịch, không có tệp dựng sẵn.