Bài 11. Geometries và meshes trong three.js

making

Ta sẽ đi xem xét ví dụ ở Bài 10

var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff);
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

Chúng tôi thấy Vật thể hình học (THREE.SphereGeometry), hình dạng của một đối tượng và material (THREE.MeshBasicMaterial) và chúng tôi kết hợp cả hai trong một lưới (THREE.Mesh) để thêm vào một Sense. Trong phần này, chúng ta sẽ xem xét kỹ hơn hình học (Geometry) và mắt lưới (Mesh). Chúng ta sẽ tìm hiểu Geometry trước

Các thuộc tính (properties) và function của Geometry (Hình học)

Three.js đi kèm với một bộ hình học mẫu lớn mà bạn có thể sử dụng trong cảnh 3D của bạn. Chỉ cần thêm vật liệu, tạo lưới và bạn đã xong.

Một số Vật thể hình học tiêu chuẩn có sẵn trong Three.js
[upl-image-preview url=https://making.vn/assets/files/2021-11-18/1637226239-27812-image.png]

Vật thể hình học sẽ có các đỉnh (vertices). Ví dụ hình vuông thì có 8 đỉnh, Trong không gian 3D, mỗi đỉnh có tọa độ (x, y, z). hay có 6 mặt, Nên bạn có thể tạo đối tượng hình học từ các đỉnh và mặt

var vertices = [
    new THREE.Vector3(1, 3, 1),
    new THREE.Vector3(1, 3, -1),
    new THREE.Vector3(1, -1, 1),
    new THREE.Vector3(1, -1, -1),
    new THREE.Vector3(-1, 3, -1),
    new THREE.Vector3(-1, 3, 1),
    new THREE.Vector3(-1, -1, -1),
    new THREE.Vector3(-1, -1, 1)
];
var faces = [
    new THREE.Face3(0, 2, 1),
    new THREE.Face3(2, 3, 1),
    new THREE.Face3(4, 6, 5),
    new THREE.Face3(6, 7, 5),
    new THREE.Face3(4, 5, 1),
    new THREE.Face3(5, 0, 1),
    new THREE.Face3(7, 6, 2),
    new THREE.Face3(6, 3, 2),
    new THREE.Face3(5, 7, 0),
    new THREE.Face3(7, 2, 0),
    new THREE.Face3(1, 3, 4),
    new THREE.Face3(3, 6, 4),
];
var geom = new THREE.Geometry();
geom.vertices = vertices;
geom.faces = faces;
geom.computeFaceNormals();

Clone đối tượng

this.clone = function () {

          var clonedGeometry = mesh.children[0].geometry.clone();
          //Dùng nhiều vật liệu cho một đối tượng
          var materials = [
              new THREE.MeshLambertMaterial({opacity: 0.8, color: 0xff44ff, transparent: true}),
              new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})
          ];

          var mesh2 = THREE.SceneUtils.createMultiMaterialObject(clonedGeometry, materials);
          mesh2.children.forEach(function (e) {
              e.castShadow = true
          });

          mesh2.translateX(5);
          mesh2.translateZ(5);
          mesh2.name = "clone";
          scene.remove(scene.getChildByName("clone"));
          scene.add(mesh2);

      }