Flutter three_js包中BufferGeometry属性设置方法咨询

Flutter版three_js的API设计和JavaScript版存在差异，尤其是BufferGeometry.setAttribute的参数顺序和属性类型定义，以下是正确的实现方式：

核心差异说明 #

JavaScript版通过属性名字符串（如'position'）绑定属性，而Flutter版使用预定义的Attribute枚举类型，且setAttribute的参数顺序与JS版完全相反：

• JS版：setAttribute(属性名字符串, BufferAttribute实例)
• Flutter版：setAttribute(Attribute枚举值, BufferAttribute实例)

正确代码示例 #

import 'package:three_js/three_js.dart' as three;

// 准备顶点、法线、UV和索引数据
final List<double> positions = [
  // 示例顶点数据：立方体的一个面
  -1.0, -1.0, 1.0,
  1.0, -1.0, 1.0,
  1.0, 1.0, 1.0,
  -1.0, 1.0, 1.0,
];
final List<double> normals = [
  0.0, 0.0, 1.0,
  0.0, 0.0, 1.0,
  0.0, 0.0, 1.0,
  0.0, 0.0, 1.0,
];
final List<double> uvs = [
  0.0, 0.0,
  1.0, 0.0,
  1.0, 1.0,
  0.0, 1.0,
];
final List<int> indices = [0, 1, 2, 0, 2, 3];

// 创建BufferGeometry实例
final geometry = three.BufferGeometry();

// 设置position属性：使用Attribute.position枚举，传入Float32BufferAttribute
geometry.setAttribute(
  three.Attribute.position,
  three.Float32BufferAttribute(positions, 3, normalized: false),
);

// 设置normal属性
geometry.setAttribute(
  three.Attribute.normal,
  three.Float32BufferAttribute(normals, 3, normalized: false),
);

// 设置uv属性
geometry.setAttribute(
  three.Attribute.uv,
  three.Float32BufferAttribute(uvs, 2, normalized: false),
);

// 设置索引：使用Uint16BufferAttribute（索引值小于65536时适用，否则用Uint32BufferAttribute）
geometry.setIndex(
  three.Uint16BufferAttribute(indices, 1, normalized: false),
);

关键注意事项 #

1. 不要强转BufferAttribute：Float32BufferAttribute是BufferAttribute的子类，直接传入setAttribute即可，强转操作会破坏类型匹配，导致属性无法正确绑定。
2. 必须指定itemSize：创建Float32BufferAttribute时的第二个参数是每个顶点的分量数（position为3，uv为2，索引为1），必须保证数据长度是itemSize的整数倍。
3. 枚举值对应正确：使用Attribute枚举中预定义的字段，比如Attribute.position、Attribute.normal、Attribute.uv，不要自定义字符串或错误枚举值。

内容的提问来源于stack exchange，提问作者5rod