Three.js 顶点颜色

提示词

PLAINTEXT
1
使用 Three.js 的 BufferGeometry 设置顶点颜色，创建多彩的点云和网格模型。

效果描述

这是一个展示如何使用顶点颜色创建多彩模型的示例，包括点云和网格模型。

效果特性

  • 顶点颜色：为每个顶点设置颜色
  • 点云渲染：使用 PointsMaterial 渲染点云
  • 网格渲染：使用 MeshBasicMaterial 渲染网格
  • 颜色插值：顶点颜色在面片上插值
  • BufferGeometry：使用 BufferGeometry 创建几何体
  • 多面模型：创建多个三角形面片

核心参数

参数 值 说明
顶点数量 6 2 个三角形
点大小 10.0 点云点的大小
颜色格式 RGB 每个顶点 3 个颜色值
顶点步长 3 每个顶点 3 个坐标值

核心代码解析

创建几何体

JAVASCRIPT
1
2
3
4
5
6
7
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
    0, 0, 0, 50, 0, 0, 50, 0, 50,
    0, 0, 0, 0, 0, 50, 50, 0, 50,
]);

geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);

设置顶点颜色

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
const colors = new Float32Array([
    1, 1, 1, // 顶点1颜色
    1, 1, 0, // 顶点2颜色
    1, 1, 1, // 顶点3颜色
    1, 0, 0, // 顶点4颜色
    0, 1, 1, // 顶点5颜色
    0, 0, 1, // 顶点6颜色
]);

geometry.attributes.color = new THREE.BufferAttribute(colors, 3);

点云材质

JAVASCRIPT
1
2
3
4
5
6
const material = new THREE.PointsMaterial({
    vertexColors: true,
    size: 10.0,
});
const points = new THREE.Points(geometry, material);
scene.add(points);

网格材质

JAVASCRIPT
1
2
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

技术亮点

  1. 顶点颜色：为每个顶点设置独立颜色
  2. 颜色插值：顶点颜色在面片上平滑插值
  3. BufferAttribute：使用 BufferAttribute 存储颜色数据
  4. 点云渲染：使用 Points 渲染点云
  5. 网格渲染：使用 Mesh 渲染网格

调试技巧

  1. 颜色范围：确保颜色值在 0-1 范围内
  2. 顶点对应：确保颜色与顶点一一对应
  3. 材质设置：vertexColors: true 启用顶点颜色
  4. 点大小：调整 size 控制点的大小
  5. 颜色数量：确保颜色数量与顶点数量匹配

扩展方向

  1. 动态颜色：动态更新顶点颜色
  2. 颜色渐变：创建颜色渐变效果
  3. 透明度：添加顶点透明度
  4. 纹理颜色：结合纹理和顶点颜色
  5. 颜色动画：动画顶点颜色

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。