[英]How to create mesh with Three.js
我有一个.obj文件
v 1 2 3
v 4 5 6
v 7 8 9
vt 0 1
vt 1 0
vn 0 0 1
vn 0 1 0
vn 0 0 1
f 1/1/1 2/2/2 3/3/3
f 1/1/2 2/2/3 1/2/3
我需要创建三个网格。 我做
var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.addAttribute('normal', new THREE.BufferAttribute(normals, 3));
geometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 2));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
var mesh = new THREE.Mesh(geometry, material);
我想我需要在数组中包含以下数据:
var vertices = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var normals = [0, 0, 1, 0, 1, 0, 0, 0, 1];
var uvs = [0, 1, 1, 0]
var indices = // ... ?
我不明白我需要在索引数组中存储什么?
对于此特定示例:
var indices = [1, 2, 3, 1, 2, 1];
这将创建一个退化的三角形,因为索引1对于相同(即第二个)三角形出现两次。
有几种方法来定义.obj格式的面部元素:
f v1 v2 v3 .... // vertex indices
f v1/vt1 v2/vt2 v3/vt3 ... // adding texture indices
f v1/vt1/vn1 v2/vt2/vn2 v3/vt3/vn3 ... // adding normal indices
f v1//vn1 v2//vn2 v3//vn3 ... // eliminating texture indices
由于缓冲区将顶点索引用于其属性,因此您将从三元组value1 / value2 / value3中选择第一个数字(值1)并形成indices
数组。
这是我的外观示例。 面的定义显示没有顶点,且顶点具有相同的纹理和法线索引。 因此,与在普通Geometry
,我们不能重用任何顶点,因为在BufferGeometry
,在BufferGeometry
数组中定义的indices
适用于顶点,uvs和normals数组。 (我认为,这就是@gaitat试图解释的内容。)
v 1 2 3
v 4 5 6
v 7 8 9
vt 0 1
vt 0.5 0.5
vt 1 0
vn 0 0 1
vn 0 1 0
vn 1 0 0
f 1/1/1 2/2/2 3/3/3
f 1/1/2 2/2/3 1/2/3
var vertices = [1,2,3, 4,5,6, 7,8,9, 1,2,3, 4,5,6, 1,2,1]; // itemSize: 3
var uvs = [0,1, 0.5,0.5, 1,0, 0,1, 0.5,0.5, 0.5,0.5]; // itemSize: 2
var normals = [0,0,1, 0,1,0, 1,0,0, 0,1,0, 1,0,0, 1,0,0]; // itemSize: 3
var indices = [0,1,2, 3,4,5]; // itemSize: 1
编辑:在上面的示例中,第一个面的第二个顶点( 2/2/2
)用1
索引。 因此,我们将从顶点,uvs和法线数组中获得第二个项目集: 4,5,6
0.5,0.5
0,1,0
。 第二个面的第二个顶点( 2/2/3
)用4
索引。 因此,我们将从每个数组中获得第5个项目集: 4,5,6
0.5,0.5
1,0,0
。 两者的顶点位置和uvs相同,但法线不同,因此无法重复使用。 因为索引数组仅对所有索引存储一个索引,而对于每个顶点位置,uv和法线则不存储三个索引。
f 1/1/1 2/2/2 3/3/3
f 1/1/2 2/2/2 1/2/3
var vertices = [1,2,3, 4,5,6, 7,8,9, 1,2,3, 1,2,1]; // itemSize: 3
var uvs = [0,1, 0.5,0.5, 1,0, 0,1, 0.5,0.5]; // itemSize: 2
var normals = [0,0,1, 0,1,0, 1,0,0, 0,1,0, 1,0,0]; // itemSize: 3
var indices = [0,1,2, 3,1,5]; // itemSize: 1
在此示例中,两个面的第二个顶点相同( 2/2/2
)。 在这种情况下,可以重复使用这些值。 数组更短,第二个面的顶点索引也为1
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.