Javascript 如何使用Three.js创建网格
我有一个.obj文件Javascript 如何使用Three.js创建网格,javascript,three.js,mesh,.obj,buffer-geometry,Javascript,Three.js,Mesh,.obj,Buffer Geometry,我有一个.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))
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中选择第一个数字(value1),并形成索引数组。对于此特定示例:
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中选择第一个数字(value1),并形成
索引数组。下面是我的示例。面的定义显示,没有具有相同纹理和法线索引的顶点。因此,与法线几何体
中一样,我们不能重用任何顶点,因为在缓冲几何体
中,索引
数组中定义的索引适用于顶点、UV和法线数组。(我想,@gaitat试图解释的就是这个。)
编辑:在上面的示例中,第一个面的第二个顶点(2/2/2
)用1
索引。因此,我们将从顶点、UV和法线数组中获得第二个项目集: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
。两者的顶点位置和UV相同,但法线不同,因此无法重复使用。因为索引数组只为所有顶点存储一个索引,而不是为每个顶点位置、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
。下面是我的示例,介绍它的外观。面的定义显示,没有具有相同纹理和法线索引的顶点。因此,与法线几何体
中一样,我们不能重用任何顶点,因为在缓冲几何体
中,索引
数组中定义的索引适用于顶点、UV和法线数组。(我想,@gaitat试图解释的就是这个。)
编辑:在上面的示例中,第一个面的第二个顶点(2/2/2
)用1
索引。因此,我们将从顶点、UV和法线数组中获得第二个项目集: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
。两者的顶点位置和UV相同,但法线不同,因此无法重复使用。因为索引数组只为所有顶点存储一个索引,而不是为每个顶点位置、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
。为什么不使用OBJLoader
?您可以在examples文件夹中找到js文件@是的,我看到了。但我想了解它是如何工作的,我刚刚看到,第二个面有两个顶点#1。所以,这张脸不会真正跨越一个三角形。面对面#我想使用第三个未定义的vt
。为什么不使用OBJLoader
?您可以在examples文件夹中找到js文件@是的,我看到了。但我想了解它是如何工作的,我刚刚看到,第二个面有两个顶点#1。所以,这张脸不会真正跨越一个三角形。和face#我想使用第三个未定义的vt
。谢谢。我已经了解了索引=[v11、v12、v13、v21、v22、v23,…]
以及如何处理vt
和vn
值?在您的obj模型中。。。他们最好和v.Hm一样。。。我不明白。是否需要使用addAttribute
或其他方法将其添加到geometry
中?不支持顶点属性的不同索引,所有顶点属性都必须使用相同的索引。所以只使用v索引,忽略vn和vt索引。非常感谢。还有一个问题。如果不使用itThanks,为什么vn
和vt
需要.obj文件中的面内参数。我已经了解了索引=[v11、v12、v13、v21、v22、v23,…]
以及如何处理vt
和vn
值?在您的obj模型中。。。他们最好和v.Hm一样。。。我不明白。是否需要使用addAttribute
或其他方法将其添加到geometry
中?不支持顶点属性的不同索引,所有顶点属性都必须使用相同的索引。所以只使用v索引,忽略vn和vt索引。非常感谢。还有一个问题。为什么vn
和vt
需要.obj文件中的面内参数?如果我们不使用它,你能解释一下,你是如何得到这个数组的,更准确地说是它们的后半部分吗?我编辑了我的文章。我希望,现在有点清楚了。你能解释一下,你是如何得到这个数组的,更准确地说是它们的后半部分吗?我编辑了我的帖子。我希望,现在更清楚一点了。