A-Frame中文教程

几何体(geometry)

几何体组件为实体提供基本形状。这个 primitive属性定义常规形状。在计算机图形188博金宝网页官网中,几何基元是不可分的基本形状。通常还定义一个材质组件来创建完整的网孔(Mesh)。

目录

基础属性

每种几何图形类型都具有以下属性:

属性 描述 默认值
buffer 将几何体转换为BufferGeometry以减少内存使用,但代价是更难操作。 true
primitive 几何体的名称(例如,下面列出的几何体之一)。确定几何图形类型以及可用的其他特性。 box
skipCache 禁用从缓存中检索共享几何体对象。 false

内置几何体

box

box几何体定义长方体(即,任何四边形,而不仅仅是立方体)。

<a-entity geometry="primitive: box; width: 1; height: 1; depth: 1"></a-entity>
属性 描述 默认值
width X轴上的边的宽度(米)。 1
height Y轴上的边的高度(米)。 1
depth Z轴上的边的深度(米)。 1

circle

circle几何体创建平面的二维圆形。这些可以完成圆形或部分圆形(像吃豆人)。注意,因为圆是平的,如果我们不在material组件上指定side: double,A-Frame将只会渲染圆的一个面:

<a-entity geometry="primitive: circle; radius: 1" material="side: double"></a-entity>
属性 描述 默认值
radius 圆的半径(米)。 1
segments 构造圆的三角形数,如比萨饼片。分段数越大,圆就越圆。 32
thetaStart 第一段的起始角度。可用于定义部分圆。 0
thetaLength 中心角(度)。默认设置为360,形成一个完整的圆。 360

thetaLengththetaStart 属性

以度为单位,thetaStart定义圆或弧的起始位置 thetaLength定义圆或圆弧的终点。如果我们想制作一个形状,我们将从圆的一半开始,将长度定义为一半一个圆圈。我们可以通过thetaStart:180;thetaLength:180来实现这一点。或者如果我们想要制作一个形状,我们可以使用代码thetaStart: 0; thetaLength: 180

常见的使用场景可能是设置动画thetaStart以创建旋转加载的效果,或者在基于凝视的光标上设置thetaLength动画以获得视觉反馈。

cone

圆锥体几何体是具有不同顶部和底部半径的圆柱体几何体。

<a-entity geometry="primitive: cone; radiusBottom: 1; radiusTop: 0.1"></a-entity>
属性 描述 默认值
height 圆锥体的高度。 2
openEnded 圆锥体的末端是打开的(true)还是盖上的(false)。 false
radiusBottom 圆锥体底端的半径。 1
radiusTop 圆锥体顶端的半径。 1
segmentsRadial 圆锥体周长周围的分段面数。 36
segmentsHeight 沿圆锥体高度的面行数。 18
thetaStart 起始角度(度)。 0
thetaLength 以度为单位的中心角。 360

cylinder

圆柱体几何体创建传统意义上的圆柱体,比如可乐瓶子,但它也可以定义形状,如管状和弧形表面。

我们可以使用高度和半径创建基本圆柱体:

<a-entity geometry="primitive: cylinder; height: 3; radius: 2"></a-entity>

我们可以通过使圆柱体开口来创建一个管子,这样可以移除顶部以及圆柱体的底面,以便内部可见。然后我们需要双面材质才能正确渲染:

<!-- Tube -->
<a-entity geometry="primitive: cylinder; openEnded: true" material="side: double"></a-entity>

我们可以通过thetaLength指定弧来创建曲面圆柱体,开放而不完全闭合,然后使用双面材质:

<!-- Curved surface -->
<a-entity geometry="primitive: cylinder; openEnded: true; thetaLength: 180"
material="side: double"></a-entity>
属性 描述 默认值
radius 圆柱体的半径。 1
height 圆柱体的高度。 2
segmentsRadial 圆柱体周长周围的分段面数。 36
segmentsHeight 沿圆柱体高度的面行数。 18
openEnded 圆柱体的端部是打开的(true)还是盖上的(false)。 false
thetaStart 起始角度(度)。 0
thetaLength 以度为单位的中心角。 360

我们能通过改变径向段的数量(即侧面)创建 prisms,例如,要制作六角棱镜:

<!-- Hexagonal prism -->
<a-entity geometry="primitive: cylinder; segmentsRadial: 6"></a-entity>

dodecahedron

十二面体几何体创建具有十二个大小相等的面的多边形。

<a-entity geometry="primitive: dodecahedron; radius: 2"></a-entity>
属性 描述 默认值
radius Radius (in meters) of the dodecahedron. 1

octahedron

八面体几何体创建具有八个等边三角形面的多边形。

<a-entity geometry="primitive: octahedron"></a-entity>
属性 描述 默认值
radius 四面体的半径(米)。 1

plane

平面几何体用来创建平面。因为平面是平的,A-Frame默认将仅呈现平面的一个面,除非我们为material组件指定side:double

<a-entity geometry="primitive: plane; height: 10; width: 10" material="side: double"></a-entity>
属性 描述 默认值
width 沿X轴的宽度。 1
height 沿Y轴的高度。 1
segmentsHeight Y轴上的分割面数。 1
segmentsWidth X轴上的分段面数。 1

ring

环几何体创建一个平面环,比如CD。因为ring是平面,A-Frame将只渲染环的一个面,除非我们为material组件指定side: double

<a-entity geometry="primitive: ring; radiusInner: 0.5; radiusOuter: 1"
material="side: double"></a-entity>
属性 描述 默认值
radiusInner 圆环内孔半径。 1
radiusOuter 圆环外缘半径。 1
segmentsTheta 分段数。数字越大,环就越圆。 32
segmentsPhi 由segmentsTheta定义的每个面内的三角形数。 8
thetaStart 起始角度(度)。 0
thetaLength 以度为单位的中心角。 360

sphere

球体几何体创建sphere(例如,balls)。我们可以创建一个基本球体:

<a-entity geometry="primitive: sphere; radius: 2"></a-entity>

We can create polyhedrons and abstract shapes by specifying the number of horizontal angles and faces:

<a-entity geometry="primitive: sphere; segmentsWidth: 2; segmentsHeight: 8"></a-entity>
属性 描述 默认值
radius 球体的半径。 1
segmentsWidth 水平段数。 18
segmentsHeight 垂直段数。 36
phiStart 水平起始角。 0
phiLength 水平扫描角度大小。 360
thetaStart 垂直起始角。 0
thetaLength 垂直扫描角度大小。 360

tetrahedron

四面体几何体创建具有四个三角形面的多边形。

<a-entity geometry="primitive: tetrahedron; radius: 2"></a-entity>
属性 描述 默认值
radius 四面体的半径(米)。 1

torus

圆环体几何体创建圆环体或曲管形状,比如甜甜圈:

<!-- Half donut -->
<a-entity geometry="primitive: torus; radius: 2; radiusTubular: 0.5; arc: 180"></a-entity>
属性 描述 默认值
radius 圆环体外缘的半径。 1
radiusTubular 管子的半径。 0.2
segmentsRadial 沿管端圆周的段数。数字越大,意味着管子就越圆。 36
segmentsTubular 沿管面周长的段数。数字越大,意味着管子就越圆。 32
arc 中心角。 360

torusKnot

环形结几何体创建一个圆环结形状。一对互质整数pq定义了圆环结的特定形状。如果pq不是互质的,结果将是一个环面:

<a-entity geometry="primitive: torusKnot; p: 3; q:7"></a-entity>
属性 描述 默认值
radius 包含圆环结的半径。 1
radiusTubular 圆环结管的半径。 0.2
segmentsRadial 沿管端圆周的段数。数字越大,意味着管子就越圆。 36
segmentsTubular 沿管面周长的段数。数字越大,意味着管子就越圆。 32
p 几何结构绕着它的旋转对称轴旋转多少次。 2
q 几何体绕着圆环内部的圆旋转多少次。 3

triangle

三角形几何体创建平面二维三角形。因为三角形是平的,A-Frame只渲染一个面,即具有vertexAvertexBvertexC以逆时针顺序出现在屏幕上,除非我们指定了material组件side:double

<a-entity geometry="primitive: triangle" material="side: double"></a-entity>
属性 描述 默认值
vertexA 三个顶点之一的坐标 0 0.5 0
vertexB 三个顶点之一的坐标 -0.5 -0.5 0
vertexC 三个顶点之一的坐标 0.5 -0.5 0

注册自定义几何体

我们可以使用 AFRAME.registerGeometry 来注册自定义几何体并创建实例为 THREE.Geometry 的一个对象。A-Frame使用此API注册所有内置几何图形。以下是A-Frame注册 box几何体的方式:

AFRAME.registerGeometry('box', {
schema: {
depth: {default: 1, min: 0},
height: {default: 1, min: 0},
width: {default: 1, min: 0},
segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
},

init: function (data) {
this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
}
});

与注册组件一样,我们提供一个名称,一个模式 schema来暴露该几何体的属性和生命周期方法。然后我们需要创建几何体并通过init生命周期方法设置 this.geometry

当几何体组件将其primitive属性设置为自定义几何体的name时,我们可以在几何体组件上设置自定义几何体的属性。假设我们注册了一个自定义几何体:

AFRAME.registerGeometry('example', {
schema: {
vertices: {
default: ['-10 10 0', '-10 -10 0', '10 -10 0'],
}
},

init: function (data) {
var geometry = new THREE.Geometry();
geometry.vertices = data.vertices.map(function (vertex) {
var points = vertex.split(' ').map(function(x){return parseInt(x);});
return new THREE.Vector3(points[0], points[1], points[2]);
});
geometry.computeBoundingBox();
geometry.faces.push(new THREE.Face3(0, 1, 2));
geometry.mergeVertices();
geometry.computeFaceNormals();
geometry.computeVertexNormals();
this.geometry = geometry;
}
});

然后我们可以在HTML中使用自定义几何体:

<a-entity geometry="primitive: example; vertices: 1 1 -3, 3 1 -3, 2 2 -3"></a-entity>