WebGL API 封装

对webgl的api进行封装，倾向于面向对象的方式使用

webgl是使用canvas开启3D

/**
   * 设置物体位置到某一点并使它的面朝向一个向量
   * @param mesh 网格
   * @param position 位置
   * @param Vec3 朝向的向量
   */
  static setMeshFaceVec3(mesh: THREE.Object3D, position: THREE.Vector3, Vec3: THREE.Vector3) {
    mesh.position.copy(position)
    //方法一
    // 然后，计算mesh的朝向。这里我们需要一个辅助向量来表示mesh的正面（通常是Y轴正方向）
    const front = new THREE.Vector3(0, 1, 0) // 默认正面朝向Y轴正方向
    // 接下来，我们需要计算一个辅助向量，它与法向量垂直，并且与mesh的正面（front）也垂直
    const side = new THREE.Vector3().crossVectors(Vec3, front).normalize()
    // 使用辅助向量来构建一个正交基，这样我们可以确保mesh的正面朝向法向量
    const up = new THREE.Vector3().crossVectors(side, Vec3).normalize()
    // 使用lookAt方法，传入目标点和up向量，来设置mesh的朝向
    mesh.lookAt(position.clone().add(up))

    // 方法二、
    const quaternion = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), Vec3)
    // 使用这个四元数来旋转立方体，使其正面朝向目标点
    mesh.quaternion.multiplyQuaternions(quaternion, new THREE.Quaternion())
  }