threejs (三) 几何体

定义：用来表示物体的形状，可以定义物体的大小，可以被缩放、旋转和平移
内置几何体：

• 二维几何体：PlaneGeometry矩形平面、CircleGeometry圆形平面、RingGeometry环形平面、ShapeGeometry二维图形
• 三维几何体：BoxGeometry立方体、TetrahedronGeometry多面体、SphereGeometry球体、ConeGeometry圆锥、CylinderGeometry圆柱、TorusGeometry圆环
• 路径合成几何体：TubeGeometry管道、LatheGeometry车削、ExtrudeGeometry挤压
• 线性几何体：WireframeGeometry网格几何体、EdgesGeometry边缘几何体

创建几何体

const plane = new THREE.PlaneGeometry(2, 2); // 创建长宽为2x2的平面

const material = new THREE.MeshLambertMaterial({
  color: '#1890ff',
});
// 生成物体对象
const mesh = new THREE.Mesh(plane, material);

BufferGeometry

const geometry = new THREE.BufferGeometry();
// 创建简单的矩形. 在这里我们左上和右下顶点被复制了两次。
const vertices = new Float32Array([
  -1.0, -1.0,  1.0, // 第1个顶点 (xyz)
  1.0, -1.0,  1.0, // 第2个顶点 (xyz)
  1.0,  1.0,  1.0, // 第3个顶点 (xyz)

  1.0,  1.0,  1.0, // 第4个...
  -1.0,  1.0,  1.0,
  -1.0, -1.0,  1.0,
]);

// 第二个参数 3 表示每个顶点都是三个值构成。
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); // 这里是告诉几何体这组数据就是顶点的坐标信息

// 设置表面颜色
const material = new THREE.MeshBasicMaterial({
  color: '#1890ff',
  // wireframe: true,
});

合并几何体

		// 把小车变成一个整体，方法一：group 存mesh对象 方便操作各个对象
        const group = new THREE.Group();
        group.add(car, wheel1, wheel2, wheel3, wheel4, light1, light2);
        group.position.y = 0.2;
        this.group = group;

        // 把小车变成一个整体，方法二：合并为一个Geometry
        // const geometry = mergeBufferGeometries([carGeometry, wheelGeometry]);
        // const mesh = new THREE.Mesh(geometry,material);
        this.scene.add(group);

小车行驶动画

createObjects() {
        const carGeometry = new THREE.BoxGeometry(2, 0.2, 1);
        const material = new THREE.MeshLambertMaterial({ color: 0x1890ff });
        const car = new THREE.Mesh(carGeometry, material);

        // 车轮
        const wheelGeometry = new THREE.CylinderGeometry(0.2, 0.2, 0.3, 10);
        const wheelMaterial = new THREE.MeshBasicMaterial({ color: 0xff00ff });
        const wheel1 = new THREE.Mesh(wheelGeometry, wheelMaterial);
        const wheel2 = new THREE.Mesh(wheelGeometry, wheelMaterial);
        const wheel3 = new THREE.Mesh(wheelGeometry, wheelMaterial);
        const wheel4 = new THREE.Mesh(wheelGeometry, wheelMaterial);
        wheel1.name = 'wheel';
        wheel2.name = 'wheel';
        wheel3.name = 'wheel';
        wheel4.name = 'wheel';
        wheel1.position.set(-0.5, 0, 0.4);
        wheel1.rotation.x = -Math.PI / 2;
        wheel2.position.set(0.5, 0, 0.4);
        wheel2.rotation.x = -Math.PI / 2;
        wheel3.position.set(-0.5, 0, -0.4);
        wheel3.rotation.x = -Math.PI / 2;
        wheel4.position.set(0.5, 0, -0.4);
        wheel4.rotation.x = -Math.PI / 2;

        const lightGeometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
        const lightMaterial = new THREE.MeshBasicMaterial({
          color: 0xffff00,
        });
        const light1 = new THREE.Mesh(lightGeometry, lightMaterial);
        const light2 = new THREE.Mesh(lightGeometry, lightMaterial);
        light1.position.set(-1.05, 0, 0.2);
        light2.position.set(-1.05, 0, -0.2);

        // 把小车变成一个整体，方法一：group 存mesh对象 方便操作各个对象
        const group = new THREE.Group();
        group.add(car, wheel1, wheel2, wheel3, wheel4, light1, light2);
        group.position.y = 0.2;
        this.group = group;

        // 把小车变成一个整体，方法二：合并为一个Geometry
        // const geometry = mergeBufferGeometries([carGeometry, wheelGeometry]);
        // const mesh = new THREE.Mesh(geometry,material);
        this.scene.add(group);
      },
       runCar() {
        // console.log(this.group.children);
        const { children } = this.group;
        const delta = 4;
        // 假设一帧走delta度  一周的长度：2 * Math.PI * 0.2
        const speed = ((2 * Math.PI * 0.2) / 360) * delta;
        for (const i in children) {
          const mesh = children[i];
          if (mesh.name === 'wheel') {
            // 把度数转为弧度
            mesh.rotation.y += THREE.MathUtils.radToDeg(delta);
          }
        }
        this.group.position.x -= speed;
        if (this.group.position.x < -10) {
          this.group.position.x = 10;
        }
      },