Về chuyên mục / Explore this topic →

Chọn một kết quả nhỏ

Mục tiêu của bài thực hành là một vật thể nhìn được, thay đổi theo thao tác và hiển thị vừa vùng nội dung. Bạn chưa cần thành phố 3D hay mô hình nặng. Dùng hình khối đơn giản giúp phân biệt lỗi camera, ánh sáng và tải tài nguyên trước khi thêm chi tiết.

Các thành phần cần hiểu

Trong Three.js, cảnh chứa các đối tượng; camera xác định góc nhìn; renderer tạo hình ảnh. Hình học mô tả hình dạng, vật liệu mô tả bề mặt. Hãy đọc tài liệu tương ứng với phiên bản dự án đang dùng. Không trộn đoạn mã từ nhiều phiên bản chỉ vì chúng đều xuất hiện trong kết quả tìm kiếm.

Bài thực hành theo thứ tự

Tạo vùng chứa có kích thước rõ ràng. Thêm cảnh, camera và renderer. Đưa một hình hộp vào vị trí nhìn được. Chọn vật liệu phù hợp với ánh sáng hiện có. Khi cảnh đã xuất hiện, thêm nút xoay và đặt lại. Cuối cùng, kiểm tra việc thay đổi kích thước vùng chứa thay vì giả định toàn bộ trang luôn là canvas.

Prompt tạo phiên bản đầu

Trong dự án hiện có, tạo cảnh Three.js tối thiểu gồm một hình hộp, camera và nền đơn giản. Có nút xoay, dừng và đặt lại ở ngoài canvas. Mọi thao tác dùng được bằng bàn phím. Kích thước canvas theo vùng chứa. Giải thích tệp được thay đổi và kiểm tra tải lại trang, thay đổi kích thước cùng trạng thái không tải được thư viện.

Tiêu chí kiểm tra

Vật thể nhìn rõ khi mở trang; nút dừng thực sự dừng chuyển động; đặt lại khôi phục góc ban đầu; nội dung chữ không bị đè. Khi mở trên điện thoại, người dùng vẫn đọc hướng dẫn và chạm được nút. Chỉ thêm mô hình riêng sau khi những hành vi này hoạt động.

English quick guide

Start with a simple object and visible controls. Understand scene, camera and renderer roles, then test resizing, pause and reset before introducing larger assets.

Tài liệu đọc thêm

Tiếp tục học trong chuyên mục →