Ví dụ portfolio 3D · 9 phút đọc

Những ví dụ portfolio 3D đáng để học hỏi

Đây là một số website portfolio 3D nổi tiếng nhất trên mạng, cùng năm portfolio bạn có thể mở và khám phá ngay tại đây, làm từ mẫu của Perlink. Với mỗi trang, bài viết ghi lại điều làm nó hiệu quả và một ý tưởng bạn có thể mang về cho portfolio của mình. Nếu được, hãy mở bằng máy tính: nhiều trang được làm cho chuột và màn hình lớn.

Bởi Perlink · Cập nhật

Điểm chung của những portfolio 3D hay nhất

Đặt các ví dụ dưới đây cạnh nhau sẽ thấy vài điểm lặp lại. Chúng không phải những trang nhiều hiệu ứng nhất. Chúng là những trang mà phần 3D nói lên điều gì đó về người làm ra nó.

  • Một ý tưởng rõ ràng. Một chiếc xe để lái, một quán mì ramen, một căn phòng, một khối cầu âm thanh. Người xem hiểu ý tưởng chỉ sau vài giây.
  • Ý tưởng hợp với người làm. Trang của nhà thiết kế âm thanh phản ứng theo âm thanh; trang của lập trình viên giấu một chiếc máy tính chạy được. Phần 3D là lời tuyên bố về công việc của họ.
  • Tác phẩm dễ tìm. Dự án, liên hệ và phần giới thiệu đều tới được nhanh, thường qua menu hoặc một màn hình không bắt phải khám phá.
  • Chúng thưởng cho sự tò mò bằng chi tiết nhỏ: đồ vật phản ứng khi chạm, những trò đùa giấu kín, âm thanh, ánh sáng thay đổi.

Những cách làm bạn có thể học theo

Bạn không cần hàng tuần học Three.js để dùng được ý tưởng của các trang này. Vài cách áp dụng được cho mọi portfolio 3D, kể cả portfolio làm bằng Perlink:

  • Lấy không gian riêng làm khung: căn phòng, bàn làm việc, studio của bạn. Ai cũng thích nhìn nơi một người làm việc.
  • Biến dự án thành đồ vật: ảnh đóng khung trên tường, màn hình trên bàn, tấm biển dẫn tới case study.
  • Đặt một lối vào đơn giản cạnh lối vào 3D, để người đang vội vẫn tìm được mọi thứ.
  • Dùng ánh sáng và thời điểm trong ngày để tạo cảm xúc. Cùng một căn phòng, ban ngày thì bình yên, ban đêm thì ấm cúng.
  • Dùng âm thanh tiết chế, để tắt cho tới khi người xem tự bật.

Những lỗi hay gặp ở portfolio 3D kém

Cứ mỗi portfolio 3D đáng nhớ lại có rất nhiều trang bị đóng sau vài giây. Lý do thường là:

  • Màn hình chờ tải quá lâu trước khi có gì hiện ra, nhất là trên điện thoại.
  • Chỉ tới được dự án khi tìm đúng đồ vật, không có menu hay danh sách.
  • Chữ vẽ ngay trong cảnh 3D, quá nhỏ để đọc và Google không thấy được.
  • Điều khiển camera ngược ý người xem, hoặc trang không còn cuộn bình thường.
  • Dùng nguyên cảnh mẫu của người khác, không có gì mang dấu ấn cá nhân, khiến phần 3D chỉ còn là đồ trang trí.

Tự làm từ đầu hay dùng công cụ?

Phần lớn các ví dụ nổi tiếng trong trang này do chính các lập trình viên hay nhà thiết kế 3D tự tay làm, thường mất nhiều tuần, với Three.js cho phần code và Blender cho mô hình. Với họ, portfolio cũng là bằng chứng cho chính tay nghề đó.

Nếu công việc của bạn là thiết kế, nhiếp ảnh, kiến trúc hay lập trình không liên quan tới 3D, tự dựng không gian là một đường vòng rất dài. Một công cụ như Perlink cho bạn không gian làm sẵn: chọn mẫu, đặt tác phẩm của bạn vào khung tranh và đồ vật, rồi đăng cả trang lẫn căn phòng tại perlink.to/tên-bạn.

Cách chúng tôi chọn các ví dụ

Danh sách này do đội ngũ biên tập lựa chọn: những portfolio 3D được biết đến rộng rãi trong cộng đồng thiết kế web và Three.js, mà chúng tôi đã mở và kiểm tra, và mỗi trang dạy một điều khác nhau. Chúng tôi dẫn link tới từng trang và mô tả bằng lời của mình, không chép chữ hay đăng ảnh chụp màn hình. Các trang có thể thay đổi theo thời gian, nên những gì bạn thấy có thể khác ghi chú ở đây.

Nếu bạn làm một portfolio 3D và thấy nó xứng đáng có mặt ở đây, hoặc bạn đã có tên và muốn được gỡ ra hay sửa thông tin, hãy viết tới support@perlink.to.

Các ví dụ

Những portfolio 3D nổi tiếng trên mạng, rồi những portfolio bạn có thể làm ngay trên Perlink, kèm phòng 3D chạy trực tiếp.

  1. 01

    Portfolio của Bruno Simon

    Của Bruno Simon · Portfolio của một lập trình viên sáng tạo, là một thế giới nhỏ để lái xe khám phá

    • Bạn lái một chiếc xe nhỏ qua khung cảnh 3D và gặp các dự án, liên kết của anh dọc đường.
    • Xem portfolio trở thành một trò chơi, đó là lý do trang được chia sẻ nhiều đến vậy.
    • Làm bằng Three.js; từng nhận Site of the Month của Awwwards tháng 11/2019.

    Nên học: Khi làm portfolio 3D, hãy cho người xem việc gì đó để làm, chứ không chỉ để nhìn.

  2. 02

    My Room in 3D

    Của Bruno Simon · Một căn phòng thật được tái hiện trên trình duyệt

    • Bản sao 3D chi tiết căn phòng của chính tác giả, dựng trong Blender và hiển thị bằng Three.js.
    • Những chi tiết nhỏ như hơi nóng bốc lên từ tách cà phê hay hình động trên TV khiến căn phòng như có người ở.
    • Mã nguồn công khai trên GitHub, rất nhiều người đã học theo và làm căn phòng của riêng mình.

    Nên học: Căn phòng của chính bạn là một khung rất mạnh cho portfolio: riêng tư, quen thuộc và dễ hiểu.

  3. 03

    Jesse’s Ramen

    Của Jesse Zhou · Trang cá nhân đặt trong một quán mì ramen 3D

    • Toàn bộ portfolio là một quán ramen cách điệu, làm bằng Three.js và Blender.
    • Dự án, bài viết và phần giới thiệu đều được dẫn tới qua quán, nên chủ đề cũng chính là cách điều hướng.
    • Ý tưởng chẳng liên quan gì tới nghề nghiệp, và chính vì thế mà người ta nhớ.

    Nên học: Một chủ đề từ cuộc sống hay văn hóa của bạn có thể dễ nhớ hơn một chủ đề về nghề.

  4. 04

    Portfolio của Henry Heffernan

    Của Henry Heffernan · Portfolio của một kỹ sư phần mềm, với một hệ điều hành máy tính nằm trong cảnh 3D

    • Lớp ngoài là một cảnh 3D, bên trong chạy một trang thứ hai giống màn hình máy tính, hoạt động như một hệ điều hành.
    • Hai lớp là hai dự án riêng, cả hai đều công khai trên GitHub.
    • Với kỹ sư phần mềm, một chiếc máy tính chạy được ngay trong portfolio là bằng chứng tay nghề trực tiếp nhất.

    Nên học: Để chính hình thức chứng minh nghề của bạn: portfolio của lập trình viên mà bản thân là một phần mềm thì nói được nhiều hơn danh sách kỹ năng.

  5. 05

    Portfolio của Jordan Breton

    Của Jordan Breton · Portfolio của một lập trình viên tự do, là một thế giới 3D để nhìn ngắm

    • Người xem kéo hoặc chạm để nhìn quanh một thế giới 3D, rồi chạm để khám phá.
    • Phần giới thiệu vẫn được viết thành chữ bình thường trên trang, đọc được mà không cần khám phá.
    • Trang cho thấy cả tay nghề Three.js sáng tạo lẫn năng lực kỹ thuật bài bản, đúng với khách hàng anh muốn hướng tới.

    Nên học: Đặt phần giới thiệu dễ đọc cạnh phần 3D, để thế giới 3D bổ sung cho thông điệp chứ không thay thế nó.

  6. 06

    Where Worlds Take Shape

    Một portfolio chơi được, làm bằng WebGL và Three.js

    • Portfolio là một thế giới 3D để khám phá, dự án hiện ra khi bạn di chuyển trong đó.
    • Trang kết hợp kể chuyện, điều hướng và các trò chơi nhỏ thay cho một danh sách tác phẩm.
    • Được Awwwards chọn là Site of the Day vào tháng 5/2026.

    Nên học: Bản thân việc khám phá có thể là trải nghiệm, miễn là người xem luôn biết bước tiếp theo đi đâu.

  7. 07

    Chiara Luzzana

    Của Niccolò Miranda for Chiara Luzzana · Portfolio của một nhà thiết kế âm thanh, xoay quanh một khối cầu 3D làm từ âm thanh

    • Ở trung tâm là khối cầu 3D mang hình sóng âm, phản ứng theo nhạc nền.
    • Âm thanh, hình ảnh và chữ đều hướng về một ý: công việc của chính người đó.
    • Được Awwwards (Site of the Day), The FWA và CSSDA ghi nhận.

    Nên học: Chọn một vật thể 3D đại diện cho công việc của bạn, thay vì dựng cả một thế giới.

  8. 08

    Portfolio 3D của James Murray

    Của James Murray · Portfolio của một lập trình viên dưới dạng vũ trụ 3D với các thế giới quay quanh

    • Người xem di chuyển trong một vũ trụ Three.js, mỗi thế giới là một phần của portfolio.
    • Mỗi thế giới chứa một khía cạnh của tác giả: dự án, câu chuyện cá nhân, cách suy nghĩ.
    • Được đề cử trên Awwwards năm 2026.

    Nên học: Gom tác phẩm vào vài nơi rõ ràng, để không gian cũng là bản đồ về con người bạn.

  9. 09

    Lusion

    Của Lusion · Trang web của một studio 3D, cũng chính là portfolio của họ

    • Một studio chuyên làm trải nghiệm 3D thời gian thực và web tương tác thể hiện tay nghề ngay trên trang của mình.
    • Phiên bản thứ ba của trang đoạt giải Site of the Year và Developer Site of the Year năm 2023 của Awwwards.
    • Một thước đo tốt cho việc 3D thời gian thực trên web có thể trau chuốt tới mức nào.

    Nên học: Trau chuốt quan trọng hơn số lượng: vài cảnh làm thật kỹ hơn hẳn nhiều cảnh làm vội.

Năm portfolio bạn có thể làm ngay hôm nay mà không cần code. Chọn một cái để mở phòng phía trên, rồi bắt đầu từ mẫu của nó.

Đang mở phòng…

Phòng 3D trực tiếp · Designer

Kéo để nhìn quanh · Cuộn hoặc chụm hai ngón để phóng to · Chạm vào một bức ảnh

Studio của nhà thiết kế

Cho designer đồ họa, họa sĩ minh họa và nghệ sĩ

  • Trang là một bộ sưu tập tác phẩm, kèm liên kết tới cửa hàng hoặc nhận đặt vẽ.
  • Trong phòng, tác phẩm treo trong khung tranh, khách chạm vào để xem lớn.
  • Tường sáng và nhiều khoảng trống giữ sự chú ý cho tác phẩm.

Nên học: Hãy coi căn phòng như một triển lãm nhỏ: ít tác phẩm hơn, treo đúng chỗ người ta nhìn đầu tiên.

Dùng mẫu này

Góc làm việc đêm của lập trình viên

Cho lập trình viên và người làm nội dung công nghệ

  • Trang nền tối, dự án xếp theo dòng thời gian, kèm liên kết tới code.
  • Căn phòng là một góc bàn làm việc về đêm, laptop và biển neon có thể dẫn tới dự án của bạn.
  • Chế độ ban đêm và ánh đèn neon gợi đúng cảm giác những đêm ngồi code.

Nên học: Gắn đồ vật với thứ có thật: laptop dẫn tới GitHub, biển neon dẫn tới dự án tốt nhất.

Dùng mẫu này

Phòng tranh của nhiếp ảnh gia

Cho nhiếp ảnh gia chân dung, du lịch và sự kiện

  • Trang đặt ảnh của bạn trên nền tối, kèm các gói chụp, giá và form đặt lịch.
  • Căn phòng là một phòng trưng bày: ảnh của bạn trong khung trên tường, chạm vào là mở lớn.
  • Khách xem xong có thể đặt lịch chụp ngay trên trang.

Nên học: Chọn ảnh đẹp cả khi nhỏ lẫn khi lớn: trong phòng ảnh hiện thành khung trước, rồi mới mở toàn màn hình.

Dùng mẫu này

Studio của kiến trúc sư

Cho kiến trúc sư và nhà thiết kế nội thất

  • Trang nhẹ nhàng như tạp chí, dự án xếp trong carousel, kèm đặt lịch tư vấn.
  • Bản thân căn phòng đã thể hiện cảm nhận không gian, với ảnh công trình đóng khung trên tường.
  • Màu dịu và ánh sáng đẹp hợp với công việc xoay quanh không gian và vật liệu.

Nên học: Với công việc về không gian, căn phòng là một phần lời chào hàng: hãy bày nó như cách bạn bày không gian cho khách.

Dùng mẫu này

Portfolio đầu tiên của sinh viên

Cho sinh viên và người mới tốt nghiệp đang tìm thực tập hay việc làm đầu tiên

  • Trang đóng vai một CV online: kinh nghiệm theo dòng thời gian, kỹ năng và nhận xét.
  • Căn phòng thêm đồ án và những khoảnh khắc trong khung tranh, giúp một CV còn ngắn trở nên có dấu ấn hơn.
  • Mở trang trước hợp khi nộp hồ sơ; căn phòng để dành cho ai tò mò.

Nên học: Khi còn ít kinh nghiệm, hãy cho thấy cách bạn làm việc và cá tính của mình: căn phòng là nơi hợp cho cả hai.

Dùng mẫu này

Biến điều bạn thích ở đây thành portfolio của mình

  1. 01

    Chọn một ý tưởng để học theo

    Một thôi, không phải năm. Một căn phòng, một góc bàn, một hòn đảo về đêm: ý tưởng bạn giải thích được trong một câu.

  2. 02

    Chọn tác phẩm mạnh nhất

    Ba đến tám dự án là đủ. Chúng sẽ nằm trong khung tranh và trên trang.

  3. 03

    Bắt đầu từ một mẫu

    Trên Perlink, chọn mẫu portfolio gần với ngành của bạn. Mẫu có sẵn trang và phòng 3D đi kèm.

  4. 04

    Biến không gian thành của bạn

    Treo ảnh của bạn, gắn liên kết dự án vào đồ vật, viết chữ của riêng bạn lên biển neon, chọn vùng đất và thời điểm trong ngày.

  5. 05

    Giữ một lối vào đơn giản

    Để lại bản trang có dự án và thông tin liên hệ, để không ai phải khám phá mới tìm thấy.

  6. 06

    Chia sẻ

    Đặt perlink.to/tên-bạn vào bio và CV, rồi đăng một video ngắn dạo quanh căn phòng.

Câu hỏi

Portfolio 3D nổi tiếng nhất là của ai?

Portfolio của Bruno Simon, nơi bạn lái một chiếc xe nhỏ đi quanh thế giới 3D để tìm dự án của anh, có lẽ là trang được chia sẻ nhiều nhất. Trang từng nhận giải Site of the Month của Awwwards tháng 11/2019 và đến nay vẫn thường được nhắc tới.

Làm một portfolio 3D như thế này mất bao lâu?

Các ví dụ tự làm trong trang này thường là thành quả nhiều tuần của những lập trình viên 3D giàu kinh nghiệm. Với công cụ như Perlink, dựng trang portfolio và phòng 3D từ mẫu chỉ mất vài phút, cộng thời gian bạn thêm tác phẩm của mình.

Tôi có cần là họa sĩ 3D mới có portfolio 3D không?

Không. Những trang nổi tiếng thường do chuyên gia 3D làm để khoe tay nghề, còn nhà thiết kế, nhiếp ảnh gia, kiến trúc sư hay sinh viên có thể dùng căn phòng làm sẵn và tập trung vào tác phẩm của mình.

Tôi có được sao chép một trong các portfolio này không?

Hãy học ý tưởng, đừng lấy code hay tài nguyên. Trang web, mô hình và nội dung thuộc về người làm ra chúng. Mượn một ý tưởng, như căn phòng hay dự án dưới dạng đồ vật, rồi làm nó thành câu chuyện về tác phẩm của bạn.

Các portfolio 3D này có chạy trên điện thoại không?

Có trang chạy tốt, có trang hợp với máy tính hơn. Đó là điều đáng chú ý khi bạn lên kế hoạch cho portfolio của mình: giữ một trang tải nhanh cho người xem bằng điện thoại, và chỉ tải phần 3D khi được mở.

Làm sao để portfolio 3D của tôi có mặt ở đây?

Gửi link tới support@perlink.to kèm một dòng về điểm đặc biệt của nó. Việc đưa vào danh sách do biên tập quyết định, và chúng tôi kiểm tra từng trang trước khi thêm.

Các ví dụ của Perlink có phải mẫu thật tôi dùng được không?

Đúng vậy. Mỗi ví dụ là một mẫu bạn có thể bắt đầu miễn phí, với trang và phòng 3D giống như bạn khám phá trong trang này.

Làm ví dụ tiếp theo

Bắt đầu từ một mẫu portfolio có sẵn trang và phòng 3D, đưa tác phẩm của bạn vào và đăng tại perlink.to/tên-bạn. Miễn phí để bắt đầu.

perlink.to/

Đọc thêm về portfolio 3D