Three.js 渐变三角形

提示词

PROMPT
1
使用 Three.js 的顶点颜色创建渐变三角形，展示顶点颜色的插值效果。

效果描述

这是一个展示如何使用顶点颜色创建渐变三角形的示例。

效果特性

  • 顶点颜色：为每个顶点设置不同颜色
  • 颜色插值：顶点颜色在三角形上插值
  • 渐变效果：创建颜色渐变效果
  • 双面渲染：DoubleSide 渲染双面
  • 索引缓冲：使用索引创建三角形
  • BufferGeometry：使用 BufferGeometry 创建几何体

核心参数

参数 值 说明
顶点数量 3 3 个顶点
颜色1 (1, 0, 0) 红色
颜色2 (0, 1, 0) 绿色
颜色3 (0, 0, 1) 蓝色
顶点1 (0, 0, 0) 原点
顶点2 (0, 200, 0) Y 轴方向
顶点3 (200, 0, 0) X 轴方向

核心代码解析

创建几何体

JAVASCRIPT
1
2
3
4
5
6
7
8
let geometry = new THREE.BufferGeometry();
let vertices = new Float32Array([
    0, 0, 0,   // 顶点p1
    0, 200, 0, // 顶点p2
    200, 0, 0, // 顶点p3
]);

geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));

设置顶点颜色

JAVASCRIPT
1
2
3
4
5
6
7
8
let colors = [
    1.0, 0.0, 0.0, // 颜色1 (红色)
    0.0, 1.0, 0.0, // 颜色2 (绿色)
    0.0, 0.0, 1.0, // 颜色3 (蓝色)
];

let colorAttribute = new THREE.BufferAttribute(new Float32Array(colors), 3);
geometry.setAttribute("color", colorAttribute);

设置索引

JAVASCRIPT
1
2
3
let indices = [0, 1, 2]; // 索引0, 1, 2 表示顶点数组中的p1, p2, p3
let indexAttribute = new THREE.BufferAttribute(new Uint16Array(indices), 1);
geometry.setIndex(indexAttribute);

创建材质

JAVASCRIPT
1
2
3
4
5
let material = new THREE.MeshBasicMaterial({
    vertexColors: true,
    side: THREE.DoubleSide,
    wireframe: false,
});

技术亮点

  1. 顶点颜色：为每个顶点设置独立颜色
  2. 颜色插值：顶点颜色在三角形上平滑插值
  3. 渐变效果：创建红绿蓝三色渐变
  4. 索引缓冲：使用索引创建三角形
  5. 双面渲染：DoubleSide 渲染双面

调试技巧

  1. 颜色范围：确保颜色值在 0-1 范围内
  2. 顶点对应：确保颜色与顶点一一对应
  3. 材质设置：vertexColors: true 启用顶点颜色
  4. 顶点位置：调整顶点位置改变三角形形状
  5. 颜色顺序：调整颜色顺序改变渐变效果

扩展方向

  1. 动态颜色：动态更新顶点颜色
  2. 颜色动画：动画顶点颜色
  3. 多三角形：创建多个渐变三角形
  4. 复杂渐变：创建复杂渐变效果
  5. 透明度：添加顶点透明度

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