three.js 入门四：THREE.BoxGeometry 解析

jackletter

已于 2024-03-19 10:16:50 修改

阅读量7.9k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： threejs/webgl 文章标签： javascript 开发语言 ecmascript

于 2024-03-14 19:33:11 首次发布

本文链接：https://blog.csdn.net/u010476739/article/details/136717582

该博客围绕Three.js 0.159.0环境下的BoxGeometry展开。介绍了其创建时内部划分成6个面，每个面有4个点、2个三角面；说明了六个小组对应的侧面顺序；提及可通过贴图查看每个小组点的uv值；还解释了new BoxGeometry参数在坐标轴上代表的长度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境：

three.js 0.159.0

问题：如何理解BoxGeometry?

BoxGeometry在创建的时候, 内部划分成了6个小组, 每个小组就是一个面有4个点, 假设长宽深的segments都是1的话(默认是1), 那么每个小组拥有2个三角面, 如下面创建的代码:

var geometry = new THREE.BoxGeometry(100, 100, 100, 1, 1, 1);
// geometry.attributes.position: 这里面有24个点, 每个面4个点
// 注意: 虽然8个点也能表示了, 但分开后的好处是, 每个面的顶点可以单独设置uv值

//geometry.attributes.uv: 这里面有24个uv值, 与上面的点一一对应

//geometry.attributes.normal: 这里面也有24个值, 与上面的点一一对应

//geometry.index: 这面有36个点位索引, 共12个三角面, 12*3 = 36

// geometry.groups 如下: 
// 0: {start: 0, count: 6, materialIndex: 0}
// 1: {start: 6, count: 6, materialIndex: 1}