THREE.js学习第三天

几何体_顶点_索引_面之BufferGeometry

1. 几何体的构成

在three中所有的几何体都是由三角形所构成 

在一个正方体内，每个面由两个三角形所构成，总共由18个三角形构成一个正方体。

2. 几何体的顶点

可以通过打印 几何体 看到每个三角形的顶点位置

const geometry = new THREE.BoxGeometry(1, 1, 1);
console.log(geometry);

通过输出可以得到一下结果： 其中array为每一个顶点的坐标，因为在xyz坐标轴中，所以每三个数据代表一个顶点的位置。一个面4个顶点，所以一个正方体六个面总共 24个顶点 ，其中 count代表几何体的顶点数。

3. 几何体官方文档的位置

可以通过在官方文档搜索关键词 geometry 得到几何体相关的API

官网地址：Creating a scene – three.js docs (threejs.org)

4. 构建一个三角形

  // 创建三角形
  const geometry = new THREE.BufferGeometry();
  // 创建顶点数据
  const vertices = new Float32Array([
    -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 0.0,
  ]);
    
  // * 将数据分三分 分别为x,y,z
  geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
  const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true,
  });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

顶点位置解释 ：

[-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 0.0]

由于在XYZ坐标轴中，以三个值作为顶点的位置键，

故：

第一个顶点在 x 轴 -1的位置 y轴-1的位置 z轴1的位置

第二个顶点在 x 轴 1的位置 y轴-1的位置 z轴1的位置

第三个顶点在 x 轴 1的位置 y轴-1的位置 z轴0的位置

打印几何体

定点数为3 坐标为我们定义的几个数字

5. 构建一个面

  const geometry = new THREE.BufferGeometry();
  const vertices = new Float32Array([
    -1.0, -1.0, 0, 1.0, -1.0, 0, 1.0, 1.0, 0.0, 1.0, 1.0, 0, -1.0, 1.0, 0, -1.0,
    -1.0, 0,
  ]);
  geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
  const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true,
  });

打印几何体

结果显示顶点为6 

如果一个面的顶点为6，那么一个正方体的顶点数应该为36个，但是我们第一次打印几何体的定点数时却显示为24？？

6.顶点公用，索引值绘制三角形

  const geometry = new THREE.BufferGeometry();
  // * 索引值绘制
  const vertices = new Float32Array([
    -1.0, -1.0, 0, 1.0, -1.0, 0, 1.0, 1.0, 0.0, -1.0, 1.0, 0,
  ]);
  //   * 创建索引
  const indices = new Uint16Array([0, 1, 2, 2, 3, 0]);
  //   * 创建索引属性
  geometry.setIndex(new THREE.BufferAttribute(indices, 1));
  // * 分三分 分别为x,y,z
  geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
  const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true,
  });

此时我们便发现这个正方向的定点数为4

原因在于 

  //   * 创建索引
  const indices = new Uint16Array([0, 1, 2, 2, 3, 0]);

它是将 顶点0  即 -1.0, -1.0, 0

        顶点1  即  1.0, -1.0, 0 

        顶点2 即 1.0, 1.0, 0.0  这三个创建了一个三角形

        顶点2  即 1.0, 1.0, 0.0

        顶点3 即  -1.0, 1.0, 0 

        顶点0  即 -1.0, -1.0, 0 这三个创建了一个三角形

        所以它的顶点值为0 ，因为公用了0 和 2 两个顶点

7. 完整代码

<template>
  <div ref="box" id="box">几何体_顶点_索引_面之BufferGeometry</div>
</template>
  <script setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
let box = ref();

onMounted(() => {
  createThree();
});

const createThree = () => {
  let box = document.getElementById("box");
  const scene = new THREE.Scene();

  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  const renderer = new THREE.WebGL1Renderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  box.appendChild(renderer.domElement);

  //   添加控制器
  const control = new OrbitControls(camera, renderer.domElement);
  control.enableDamping = true;
  control.dampingFactor = 0.05;
  // const geometry = new THREE.BoxGeometry(1, 1, 1);
  // console.log(geometry);
  // const geometry = new THREE.BoxGeometry(1, 1, 1);
  // console.log(geometry);
  //   const material = new THREE.MeshBasicMaterial({
  //     color: 0x00ff00,
  //     wireframe: true,
  //   });

  // ** 类目 geome
  // 创建三角形
  const geometry = new THREE.BufferGeometry();
  // 创建顶点数据
  // const vertices = new Float32Array([
  //   -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 0.0,
  // ]);
  console.log(geometry);
  // const vertices = new Float32Array([
  //   -1.0, -1.0, 0, 1.0, -1.0, 0, 1.0, 1.0, 0.0, 1.0, 1.0, 0, -1.0, 1.0, 0, -1.0,
  //   -1.0, 0,
  // ]);

  // * 索引值绘制
  const vertices = new Float32Array([
    -1.0, -1.0, 0, 1.0, -1.0, 0, 1.0, 1.0, 0.0, -1.0, 1.0, 0,
  ]);

  //   * 创建索引
  const indices = new Uint16Array([0, 1, 2, 2, 3, 0]);
  //   * 创建索引属性
  geometry.setIndex(new THREE.BufferAttribute(indices, 1));
  // * 分三分 分别为x,y,z
  geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
  const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true,
  });

  //   console.log("geometry", geometry);
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  camera.position.x = 5;
  camera.position.y = 0;
  camera.position.z = 0;

  const axesHelper = new THREE.AxesHelper(5);
  scene.add(axesHelper);

  function animate() {
    control.update();
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }

  animate();
};
</script>