什么是geometry变量:
举例来说,一个方块:
-
一个方块有八个角。每个角都可以定义为x,y,z坐标的一个组合。所以每个方块都是三维空间中的8个点。在three.js库中,这些点称为顶点。
-
一个方块有6个侧面,每个角有一个顶点。在three.js库中,每个侧面称为面,当你使用three.js库提供的这些几何体时,你不必亲自定义这些顶点和面。对于一个方块来讲,你只要定义长宽高即可。three.js库会利用这些信息,在正确的位置创建一个拥有八个顶点的几何体,并用正确的面连接起来。尽管你可以使用three.js提供的几何体,或者自动生成,但也可以自己手工创建几何体。创建方法可以参照下面的代码片段:
var vertices = [
new THREE.Vector3(1, 3, 1),
new THREE.Vector3(1, 3, -1),
new THREE.Vector3(1, -1, 1),
new THREE.Vector3(1, -1, -1),
new THREE.Vector3(-1, 3, -1),
new THREE.Vector3(-1, 3, 1),
new THREE.Vector3(-1, -1, -1),
new THREE.Vector3(-1, -1, 1)
];
var faces = [
new THREE.Face3(0, 2, 1),
new THREE.Face3(2, 3, 1),
new THREE.Face3(4, 6, 5),
new THREE.Face3(6, 7, 5),
new THREE.Face3(4, 5, 1),
new THREE.Face3(5, 0, 1),
new THREE.Face3(7, 6, 2),
new THREE.Face3(6, 3, 2),
new THREE.Face3(5, 7, 0),
new THREE.Face3(7, 2, 0),
new THREE.Face3(1, 3, 4),
new THREE.Face3(3, 6, 4),
];
var geom = new THREE.Geometry();
geom.vertices = vertices;
geom.faces = faces;
geom.computeFaceNormals();
这段代码展示的是如何创建一个简单的方块。我们在vertices数组定义了构成这个方块的点。将这些点连接起来,创建三角面片,并保存在faces数组里。例如,元素new THREE.Face3(0, 2, 1)就是用vertices数组里的点0、2和1创建的一个三角面片。