ThreeJs là framework lập trình 3D cho Web trên webGL, (openGL).
Để bắt đầu với ThreeJs, bạn cần có kiến thức vững về web, #html5, và #javascript
Cơ bản ThreeJS bao gồm tất cả API 3d của WebGL, giúp người lậ p trình có thể dễ dàng lập trình 3D trên môi trường web. ThreeJs render với html5 #canvas
https://github.com/mrdoob/three.js
Tuyệt vời là ThreeJs có thể lập trình với các framework js chư React mà không gặp bất kỳ trở ngại nào.
Bạn có thể dùng React-Three-Fiber
https://github.com/pmndrs/react-three-fiber
Ví dụ về 1 hình 3D được render bởi threejs
[upl-image-preview url=https://making.vn/assets/files/2021-11-16/1637030846-963312-image.png]
Threejs được xây dựng theo kiểu js ES 6.
- Cài đặt Threejs
npm install --save three
Dùng gói npm để cài threejs
- Import gói để dùng
// Lựa chọn 1: Import tất cả vào Code
import * as THREE from 'three';
const scene = new THREE.Scene();
// Lựa chọn 2: Import phần cần dùng
import { Scene } from 'three';
const scene = new Scene();
Khi cài đặt từ npm, hầu như bạn sẽ luôn sử dụng một số loại công cụ đóng gói để kết hợp tất cả các gói mà dự án của bạn yêu cầu thành một tệp JavaScript duy nhất. Mặc dù bất kỳ gói JavaScript hiện đại nào cũng có thể được sử dụng với three.js, nhưng lựa chọn phổ biến nhất là #webpack.
Không phải tất cả các tính năng đều được truy cập trực tiếp thông qua threejs. Các phần phổ biến khác của thư viện - chẳng hạn như controls (bộ điều khiển), loaders (tải các model 3d, assets) , và post-processing effects (hiệu ứng xử lý hậu kỳ) được lưu thư mục con example / jsm. Và khi dùng bạn cần phải import riêng từ các thư mục nauyf.
Hoặc bạn có thể dùng CDN
<script type="module">
// Tìm phiên bản mới nhất tại trang web https://cdn.skypack.dev/three
import * as THREE from 'https://cdn.skypack.dev/three@<version>';
const scene = new THREE.Scene();
</script>
Khả năng tương thích
CommonJS
Mặc dù các gói js hiện nay điều hổ trợ ES , tuy nhiên nếu bạn muốn dùng js theo kiểu cổ điển thì bạn có thể định cấu hình trình gói để hiểu các mô-đun ES: Ví dụ : Browserify chỉ cần plugin babelify .
Node.js
Sử dụng Three.js trong Node.js có thể sẽ khó, vì hai lý do:
Đầu tiên, vì three.js được xây dựng cho web nên nó phụ thuộc vào trình duyệt và API DOM không phải lúc nào cũng tồn tại trong Node.js. Vấn đề này có thể được giải quyết bằng cách sử dụng headless-gl hoặc bằng cách thay thế các thành phần như TextureLoader bằng các lựa chọn thay thế tùy chỉnh. Các API DOM khác có thể gắn bó mật thiết với code đã viết cho chúng và sẽ khó xử lý hơn.
Thứ hai, hỗ trợ Node.js cho các mô-đun ES là … phức tạp. Kể từ Node.js v12, thư viện lõi có thể được nhập dưới dạng mô-đun CommonJS, với request (‘three’) . Tuy nhiên, hầu hết các thành phần ví dụ trong example / jsm không thể. Các phiên bản trong tương lai của Node.js có thể giải quyết vấn đề này, nhưng trong thời gian chờ đợi, bạn có thể cần sử dụng các giải pháp thay thế như esm để cho phép ứng dụng Node.js của bạn nhận dạng các mô-đun ES.
Cảm ơn các bạn đã xem, Hãy đến bài 2 để tiếp tục nhé
