three.js
Thư viện JavaScript dành cho các định dạng tệp 3D
API JavaScript nguồn mở để đọc, viết và hiển thị các định dạng tệp WebGL, FBX, Collada cũng như OBJ thông qua thư viện 3D miễn phí.
Three.js là một thư viện JavaScript 3d thuần túy, dễ sử dụng mã nguồn mở cung cấp cho các nhà phát triển phần mềm khả năng hiển thị các tệp WebGL. Thư viện Three.js cung cấp các trình tải cho nhiều định dạng tệp như FBX, Collada cũng như OBJ nhưng định dạng được khuyến nghị để nhập và xuất dữ liệu là glTF. Điều tuyệt vời về định dạng tệp glTF là nó rất nhỏ gọn và có thể dễ dàng truyền tải và cũng tải rất nhanh.
Thư viện hỗ trợ một số tính năng quan trọng liên quan đến mô hình 3D như tạo cảnh, tải mô hình 3D, tạo văn bản, vẽ đường đặt camera, tạo hình khối hình học, thêm hình khối vào cảnh, hiển thị cảnh, thêm khung nhìn vào phần tử, và nhiều cái khác. Có các máy ảnh khác nhau được sử dụng trong thư viện three.js.
Nhìn sơ qua
Tổng quan về các tính năng của Three.js.
- Tạo cảnh 3D
- Đang tải mô hình 3D
- Vẽ các đường
- Đọc / Viết FBX
- Đọc / Viết Collada
- Chuyển đổi cảnh 3D
- Xuất dữ liệu trong glTF
- xử lý thành phần
- xử lý kết cấu
Three.js hỗ trợ các định dạng tệp 3D phổ biến được liệt kê bên dưới.
Nền tảng độc lập
Three.js có thể chạy trên bất kỳ gói JavaScript hiện đại nào, lựa chọn phổ biến nhất là webpack.
- JavaScript
Bắt đầu với ba.js
Cách dễ nhất để cài đặt Three.js là sử dụng npm. Vui lòng sử dụng lệnh sau để cài đặt suôn sẻ.
Cài đặt Three.js qua NPM
npm install --save three Tạo cảnh bằng JavaScript
Thư viện mã nguồn mở ba.js đã cung cấp hỗ trợ tạo cảnh 3D để quay một khối bên trong ứng dụng JavaScript của riêng họ. Để hiển thị bất cứ thứ gì với ba.js, chúng tôi yêu cầu một cảnh, máy ảnh và trình kết xuất. Bạn có thể sử dụng các máy ảnh khác nhau và thuộc tính của chúng để hoàn thành cảnh quay. Tiếp theo, bạn có thể sử dụng một phiên bản trình kết xuất và đặt kích thước mà chúng tôi muốn nó hiển thị ứng dụng của chúng tôi. Bạn có thể giữ độ phân giải thấp hơn hoặc cao hơn. Cuối cùng, bạn thêm phần tử trình kết xuất (& lt; canvas & gt;) vào tài liệu HTML của mình. Bạn có thể dễ dàng tạo một khối lập phương bằng cách sử dụng BoxGeometry và sử dụng vật liệu để tô màu cho nó. Sau đó, bạn cần một Lưới có thể được chèn vào cảnh và di chuyển theo nhu cầu của bạn.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and trình kết xuất. You can use different cameras and their attribute to complete the scene. Next, you can use a trình kết xuất instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the trình kết xuất element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Mesh that can be inserted into the scene and moved according to your need.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Lưới thép that can be inserted into the scene and moved according to your need.
Tải Mô hình 3D qua JavaScript
Thư viện mã nguồn mở Three.js cho phép các nhà lập trình phần mềm tải các mô hình 3D bên trong ứng dụng của riêng họ chỉ với một vài dòng mã JavaScript. Các mô hình 3D có sẵn ở hàng trăm định dạng tệp. Mỗi mô hình đi kèm với các mục đích khác nhau, các tính năng khác nhau và độ phức tạp khác nhau. Đầu tiên, bạn cần phải có một trình tải và sau đó, bạn sẽ có thể tải cảnh.
Vẽ đường trong sơ đồ
Thư viện mã nguồn mở three.js đã cung cấp hỗ trợ để vẽ các đường thẳng hoặc vòng tròn bên trong ứng dụng JavaScript của riêng họ. Để bắt đầu, chúng ta cần thiết lập trình kết xuất, cảnh và máy ảnh. Sau đó, bạn cần xác định vật liệu và có thể sử dụng LineBasicMaterial hoặc LineDashedMaterial. Sau vật liệu, chúng ta sẽ cần hình học với một số đỉnh. Các đường thẳng được vẽ giữa mỗi cặp đỉnh liên tiếp.
