三维图形基础：点模型

建议先阅读完文章，再查看 实例代码

如何使用点模型 Points 来渲染这些形状。

点模型 Points

与网格模型 Mesh 类似，点模型 Points 也是 Three.js 中的一种模型对象。不过，Points 主要用于渲染单个顶点，而不是由顶点组成的面。

创建点材质

使用 PointsMaterial 来定义点模型的材质属性，如颜色和大小。

const material = new THREE.PointsMaterial({
  color: 0xffff00, // 黄色
  size: 10.0, // 点对象的像素尺寸
});

创建点模型

将几何体作为参数传递给 Points 构造函数，以创建一个点模型对象。

const points = new THREE.Points(geometry, material);

实例：创建并渲染一个简单的点模型

以下是一个完整的示例，展示如何创建一个简单的点模型并将其渲染到场景中。

// 初始化场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建点模型
const vertices = new Float32Array([0, 0, 0, 50, 0, 0, 0, 100, 0]);
const geometry = new THREE.BufferGeometry();
const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute;

const material = new THREE.PointsMaterial({ color: 0xffff00, size: 5 });
const points = new THREE.Points(geometry, material);
scene.add(points);

// 设置相机位置
camera.position.z = 5;

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

这个示例创建了一个包含三个顶点的点模型，并将其渲染在一个简单的场景中。您可以根据需要调整顶点数据和材质属性，以创建更复杂的点模型。