Threejs物体

几何体顶点

问 ChatGPT:Float32Array 在 JavaScrpit 代表什么，为什么在 threejs 中使用 positon 数组时要使用这种数据结构？

Float32Array 是 JavaScript 中的一种 TypedArray 类型，用于表示 32 位浮点数的数组。它可以在内存中创建一个连续的 32 位浮点数序列，提供了高效的数据存储和操作。在 WebGL 和 three.js 中，使用 Float32Array 可以提高数据传输和计算效率，因为它们直接与 GPU 交互，避免了数据类型转换和内存拷贝的开销。

在 three.js 中，position 数组用于表示三维模型中每个顶点的位置。由于 WebGL 需要将这些数据传输到 GPU 中进行渲染，因此使用 Float32Array 可以减少数据传输的开销，并提高渲染性能。此外，由于 WebGL 和 three.js 使用的是 OpenGL 标准，因此它们需要使用浮点数来表示顶点位置和其他属性，因此 Float32Array 也是一种必须的数据类型。

追问：你可以更详细的介绍一下 Float32Array 吗？

当我们在 JavaScript 中需要处理大量数值时，例如在数据可视化、图像处理、3D 渲染等场景中，使用普通的 JavaScript 数组可能会遇到性能问题。因为普通的 JavaScript 数组是动态数组，不同的元素可能存储在不同的内存地址中，这会导致数据不连续，内存分散，无法充分利用 CPU 缓存和 SIMD 指令，而这些都是数据处理的关键性能因素。

为了解决这个问题，JavaScript 引入了 TypedArray 类型，其中包括 Uint8Array、Int16Array、Float32Array 等多种类型，可以直接创建一段连续的二进制数据，实现高效的数据存储和操作。

在这些 TypedArray 中，Float32Array 用于表示 32 位浮点数的数组，它可以通过以下方式创建：

// 创建一个包含10个元素的Float32Array数组
const arr = new Float32Array(10)

创建后，可以像普通的 JavaScript 数组一样，通过索引访问和修改数组中的元素：

arr[0] = 1.0
arr[1] = 2.0
arr[2] = 3.0

Float32Array 还提供了一些高效的数据处理方法，例如 slice、subarray、set、copyWithin 等，这些方法可以直接在二进制数据上进行操作，避免了创建新数组和复制数据的开销。

由于 Float32Array 直接映射到内存中的二进制数据，因此它可以被广泛用于高性能的数据处理场景，例如在 three.js 中用于表示顶点、法线、纹理坐标等属性的数组，或者在 WebGL 中用于表示纹理数据、帧缓冲区等的数组。

attributes.position 代表顶点的位置

控制台输出物体的 attributes.position 属性发现一个四面体有 24 个顶点

四面体不是只有 8 个顶点吗？

在 threejs 中顶点代表的是组成一个面的两个三角形的顶点，一个三角形有 3 个顶点，所以一个面有 6 个顶点

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, 1.0,

  1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0,
])
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)

uv

三维建模中的UV可理解为立体模型的“皮肤”，将“皮肤”展开然后进行二维平面上的绘制

UV这里是指 u,v 纹理贴图坐标的简称(它和空间模型的 X,Y, Z 轴是类似的)

它定义了图片上每个点的位置的信息. 这些点与 3D 模型是相互联系的, 以决定表面纹理贴图的位置

法向

在从字面理解，法向即法线的方向，与切向，即切线的方向垂直。切向和法向都是相对于界面、轨迹等而言的。

案例

显卡毁灭者:随机生成 99999 个三角形

警告

容易造成浏览器卡死

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

// 创建场景
const scene = new THREE.Scene()

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)

// 设置相机位置
camera.position.set(3, 3, 3)
scene.add(camera)

// 随机创建50个三角形
for (let i = 0; i < 99999; i++) {
  const geometry = new THREE.BufferGeometry()
  const positionArr = new Float32Array(9)
  for (let j = 0; j < 9; j++) {
    positionArr[j] = Math.random()
  }
  geometry.setAttribute('position', new THREE.BufferAttribute(positionArr, 3))
  const color = new THREE.Color(Math.random(), Math.random(), Math.random())
  const material = new THREE.MeshBasicMaterial({ color: color })
  const mesh = new THREE.Mesh(geometry, material)
  // 物体添加到添加场景
  scene.add(mesh)
}

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 阻尼效果
controls.enableDamping = true

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(10)
// 将坐标轴辅助器添加到场景中
scene.add(axesHelper)

// 渲染函数
function render() {
  renderer.render(scene, camera)
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render)
}
render()