A-Frame Primitives

Primitives

- <a-box> <a-sky> 같은 A-Frame의 Entity를 편리한 html태그 요소로 사용 가능.

   직접 Primitive를 생성도 가능.

<a-box color="red" width="3"></a-box> 는

<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity> 를 나타냄.

- Primitives 등록

  1) AFRAME.registerPrimitive(name, definition)을 이용하여 등록가능

  name : "-"를 포함한 문자열이어야 한다. ex) 'a-foo'

  definition : javascript object정의 속성

Property	Description	Example
defaultComponents	Object specifying default components of the primitive. The keys are the components’ names and the values are the components’ default data.	{geometry: {primitive: 'box'}}
mappings	Object specifying mapping between HTML attribute name and component property names. Whenever the HTML attribute name is updated, the primitive will update the corresponding component property. The component property is defined using a dot syntax ${componentName}.${propertyName}.	{depth: 'geometry.depth',   height: 'geometry.height',   width: 'geometry.width'}

  2) 예시

primitive 등록 : ocean component를 감싸는 <a-ocean> primitive

AFRAME.registerPrimitive('a-ocean', { // Attaches the `ocean` component by default. // Defaults the ocean to be parallel to the ground. defaultComponents: { ocean: {}, rotation: {x: -90, y: 0, z: 0} }, // Maps HTML attributes to the `ocean` component's properties. mappings: { width: 'ocean.width', depth: 'ocean.depth', density: 'ocean.density', color: 'ocean.color', opacity: 'ocean.opacity' } });

component 등록

AFRAME.registerComponent('ocean', {

schema: {

// Dimensions of the ocean area.

width: {default: 10, min: 0},

depth: {default: 10, min: 0},

// Density of waves.

density: {default: 10},

// Wave amplitude and variance.

amplitude: {default: 0.1},

amplitudeVariance: {default: 0.3},

// Wave speed and variance.

speed: {default: 1},

speedVariance: {default: 2},

// Material.

color: {default: '#7AD2F7', type: 'color'},

opacity: {default: 0.8}

},

/**

* Use play() instead of init(), because component mappings – unavailable as dependencies – are

* not guaranteed to have parsed when this component is initialized.

*/

play: function () {

const el = this.el,

data = this.data;

let material = el.components.material;

const geometry = new THREE.PlaneGeometry(data.width, data.depth, data.density, data.density);

geometry.mergeVertices();

this.waves = [];

for (let v, i = 0, l = geometry.vertices.length; i < l; i++) {

v = geometry.vertices[i];

this.waves.push({

z: v.z,

ang: Math.random() * Math.PI * 2,

amp: data.amplitude + Math.random() * data.amplitudeVariance,

speed: (data.speed + Math.random() * data.speedVariance) / 1000 // radians / frame

});

}

if (!material) {

material = {};

material.material = new THREE.MeshPhongMaterial({

color: data.color,

transparent: data.opacity < 1,

opacity: data.opacity,

shading: THREE.FlatShading,

});

}

this.mesh = new THREE.Mesh(geometry, material.material);

el.setObject3D('mesh', this.mesh);

},

remove: function () {

this.el.removeObject3D('mesh');

},

tick: function (t, dt) {

if (!dt) return;

const verts = this.mesh.geometry.vertices;

for (let v, vprops, i = 0; (v = verts[i]); i++){

vprops = this.waves[i];

v.z = vprops.z + Math.sin(vprops.ang) * vprops.amp;

vprops.ang += vprops.speed * dt;

}

this.mesh.geometry.verticesNeedUpdate = true;

}

});

사용

<a-ocean color="aqua" depth="100" width="100"></a-ocean>