1. Nghiêng và parallax: trông như 3D, phần lớn là CSS
Loại nhẹ nhất. Thẻ dự án nghiêng về phía con trỏ, các lớp của một bức ảnh trôi với tốc độ khác nhau, hoặc ảnh đầu trang dịch nhẹ khi cuộn. Tất cả làm bằng CSS transform (perspective, rotateX, rotateY, translateZ) cùng vài dòng JavaScript theo dõi con trỏ hay vị trí cuộn.
Hiệu ứng này tạo chiều sâu mà không phải tải thư viện 3D nào, và chạy tốt trên hầu hết thiết bị. Giới hạn là không có gì thật sự 3D: không có mô hình, không có camera, chỉ là các lớp phẳng được dịch trong không gian. Hãy dùng để lưới tác phẩm sinh động hơn, đừng biến nó thành ý tưởng chính của trang.
2. 3D theo thanh cuộn: cảnh chuyển động khi bạn đọc
Một vật thể hay cảnh 3D đứng yên trên màn hình rồi xoay, mở ra hoặc biến đổi khi người xem cuộn trang, trong lúc các đoạn chữ trôi qua. Trang ra mắt sản phẩm rất hay dùng kiểu này. Thường được làm bằng Three.js hoặc React Three Fiber cho phần cảnh, kèm một thư viện hoạt ảnh như GSAP với plugin ScrollTrigger để gắn camera hay mô hình vào vị trí cuộn.
Kiểu này kể chuyện theo trình tự, rất hợp với case study. Đổi lại tốn công hơn: một thư viện 3D, ít nhất một mô hình, và phải tinh chỉnh kỹ để chuyển động mượt khi cuộn. Chiếm quyền cuộn trang, khiến trang không còn cuộn bình thường, là lỗi phổ biến nhất làm người xem khó chịu.
3. Cảnh WebGL đầu trang: một cảnh 3D ở màn hình đầu tiên
Một cảnh tương tác duy nhất ở màn hình đầu: một khối hình phản ứng theo chuột, các hạt sáng, mô hình một thứ bạn từng làm, một shader gợn sóng. Phần còn lại của portfolio là trang bình thường. Công cụ có thể là Spline, nơi bạn dựng cảnh trực quan rồi nhúng vào, hoặc Three.js, React Three Fiber viết bằng code, với mô hình làm trong Blender.
Với nhiều người, đây là điểm cân bằng tốt nhất: ấn tượng mạnh ở cái nhìn đầu mà tác phẩm vẫn dễ đọc. Rủi ro là màn hình đầu tải chậm, mà đó lại đúng là lúc người xem quyết định ở lại hay đi, nên cảnh 3D cần tải sau phần chữ và có một ảnh tĩnh thay thế.
4. Thế giới để khám phá: portfolio chính là không gian
Toàn bộ portfolio là một nơi chốn 3D: căn phòng, hòn đảo, thị trấn hay một trò chơi. Người xem di chuyển và tìm thấy dự án dưới dạng đồ vật. Những ví dụ nổi tiếng nhất, như portfolio của Bruno Simon nơi bạn lái một chiếc xe nhỏ đi quanh một thế giới, đã tốn của người làm nhiều tuần với Three.js và Blender cùng rất nhiều tay nghề.
Không gì dễ nhớ bằng, và cũng không gì tốn công làm và cập nhật bằng. Rủi ro cũng lớn nhất: tải lâu, tác phẩm bị giấu sau việc khám phá và chạy kém trên điện thoại yếu. Một thế giới 3D hiệu quả nhất khi vẫn có lối vào đơn giản, như một menu hay một trang bình thường với cùng các dự án.
Các công cụ, và mỗi cái đòi hỏi gì
Three.js là thư viện JavaScript phổ biến nhất cho 3D trên trình duyệt; nó lo phần render, camera, ánh sáng, chất liệu và nạp mô hình, chạy trên nền WebGL. React Three Fiber cho phép viết cảnh Three.js dưới dạng component React, hợp với trang đã làm bằng React hay Next.js. Spline là trình dựng cảnh 3D trực quan, xuất ra mã nhúng, bắt đầu nhanh nhưng nặng hơn và kém linh hoạt hơn code viết tay. Blender là nơi phần lớn mô hình được dựng và gắn texture trước khi xuất ra, thường ở dạng glTF hoặc GLB.
Tự làm bất kỳ hiệu ứng lớn nào cũng có nghĩa là phải học ít nhất một trong số này, cộng thêm cách nén mô hình và texture. Nếu mục tiêu của bạn là có portfolio chứ không phải học 3D, một công cụ làm sẵn phần 3D sẽ tiết kiệm phần lớn thời gian đó.
Nguyên tắc giữ portfolio 3D luôn nhanh
Dù chọn loại hiệu ứng nào, vẫn là những thói quen này quyết định trang nhanh hay nặng:
- Giữ tên, phần giới thiệu và mô tả dự án là chữ HTML thật, không vẽ trong cảnh 3D, để Google, trình đọc màn hình và công cụ dịch đọc được.
- Tải 3D sau trang: hiện chữ trước, rồi mới tải thư viện và mô hình khi cảnh sắp được xem hoặc khi có người chạm để mở.
- Nén mô hình (glTF với Draco hoặc Meshopt) và texture (KTX2 hoặc WebP), giữ số đa giác thấp.
- Giảm chất lượng trên máy yếu: render nhỏ hơn, ít bóng đổ hơn, giảm số khung hình khi không có gì chuyển động.
- Tôn trọng prefers-reduced-motion và có ảnh tĩnh hoặc bản đơn giản cho người tắt chuyển động.
- Có phương án dự phòng khi máy không hỗ trợ WebGL, và đừng bao giờ để 3D là đường duy nhất tới tác phẩm hay thông tin liên hệ.
Perlink nằm ở đâu trong bức tranh này
Perlink cho bạn loại “thế giới để khám phá” mà không cần code. Portfolio của bạn là một trang bình thường, tải nhanh và Google đọc được, đồng thời chính trang đó là một căn phòng 3D để khách dạo quanh: ảnh tác phẩm trong khung trên tường, liên kết gắn vào laptop hay biển neon, bàn làm việc, kệ sách, đèn, trên một trong 11 vùng đất, ngày hoặc đêm.
Căn phòng chỉ tải khi được mở, hoặc tải trước nếu bạn chọn mở phòng trước, và tự điều chỉnh chất lượng theo máy, dùng WebGL hoặc WebGPU nếu trình duyệt hỗ trợ. Bạn sắp xếp mọi thứ bằng trình chỉnh sửa trực quan, và có thể quay video dọc dạo quanh phòng để đăng mạng xã hội.