Trong bài trước, bạn đã học những kiến thức cơ bản về Three.js. Chúng ta đã xem xét một vài ví dụ và bạn đã tạo ứng dụng Three.js hoàn chỉnh đầu tiên của mình. Trong bài này, chúng ta sẽ đi sâu hơn một chút về Three.js và giải thích những điều cơ bản các thành phần tạo nên ứng dụng Three.js.
- Các thành phần chính mà bạn có thể sử dụng để tạo ứng dụng Three.js
- Bạn có thể làm gì với THREE.Scene
- Hình học và Mesh có liên quan như thế nào
- Sự khác biệt giữa Camera Orthographic và Perspective
Các thành phần chính mà bạn có thể sử dụng để tạo ứng dụng Three.js
Camera
Xác định những gì được hiển thị trên màn hình
Lights
Cách vật liệu được hiển thị và được sử dụng khi tạo hiệu ứng đổ bóng
Objects
Các đối tượng 3D sẽ được Render
Renderer
Sử dụng máy ảnh và thông tin từ hiện trường để vẽ đầu ra trên màn hình.
Các hàm (function) cơ bản với Sense
Thêm và gỡ bỏ đối tượng
//Thêm đối tượng
this.addCube = function() {
var cubeSize = Math.ceil((Math.random() * 3));
var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.name = "cube-" + scene.children.length;
cube.position.x= -30 + Math.round(Math.random() * planeGeometry.width));
cube.position.y= Math.round((Math.random() * 5));
cube.position.z= -20 + Math.round((Math.random() * planeGeometry.height));
scene.add(cube);
this.numberOfObjects = scene.children.length;
};
//Gỡ đối tượng
this.removeCube = function() {
var allChildren = scene.children;
var lastObject = allChildren[allChildren.length-1];
if (lastObject instanceof THREE.Mesh) {
scene.remove(lastObject);
this.numberOfObjects = scene.children.length;
}
}
Kết quả
Các Hàm cơ bản với Scense
- THREE.Scene.Add: Thêm một đối tượng vào Scense
- THREE.Scene.Remove: Thao tác này xóa một đối tượng khỏi Scense
- THREE.Scene.children: Điều này lấy danh sách tất cả đối tượng trong cảnh
- THREE.Scene.getObjectByName: Điều này lấy một đối tượng cụ thể, theo tên, từ Scense
- THREE.Scene.traverse(): Hàm traverse () để áp dụng cho tất các đối tượng thuộc Sence
Thêm sương mù vào cảnh
scene.fog = new THREE.Fog( 0xffffff, 0.015, 100 );
[upl-image-preview url=https://making.vn/assets/files/2021-11-18/1637224069-387120-image.png]
Hoặc
scene.fog = new THREE.FogExp2( 0xffffff, 0.01 );
[upl-image-preview url=https://making.vn/assets/files/2021-11-18/1637224098-449881-image.png]
Sử dụng thuộc tính overrideMaterial của Sense
Ghi đè vật liệu của các đối tượng thuộc Three
scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
Ta thấy các đối tượng thuộc Sence có vật liệu giống nhau
