A-FRAME 公式ドキュメントの非公式日本語訳
1.3.0 › core

Utils

A-Frameのユーティリティモジュールは、AFRAME.utilsを通じて公開されています。

# AFRAME.utils.coordinates

vec3, vec4 型を扱うモジュールです。

# .isCoordinates (value)

文字列がvec3またはvec4であるかどうかをテストします。

AFRAME.utils.coordinates.isCoordinates('1 2 3')
// >> true

AFRAME.utils.coordinates.isCoordinates('1 2 3 4')
// >> true

# .parse (value)

"x y z" の文字列を {x, y, z} vec3 オブジェクトにパースします。または、"x y z w" の文字列を {x, y, z, w} vec4 オブジェクトにパースします。

AFRAME.utils.coordinates.parse('1 2 -3')
// >> {x: 1, y: 2, z: -3}

# .stringify (data)

{x, y, z}のvec3オブジェクトを "x y z "の文字列に文字列化します。あるいは、{x, y, z, w}のvec4オブジェクトを "x y z w "の文字列に文字列化します。

AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
// >> "1 2 -3"

AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3, w:4})
// >> "1 2 -3 4"

# AFRAME.utils.entity

# .getComponentProperty(entity, componentName, delimiter='.')

Performs like Entity.getAttribute, but with support for return an individual property for a multi-property component. componentName is a string that can either be a component name, or a component name delimited with a property name.

Entity.getAttributeのように動作しますが、マルチプロパティコンポーネントの個々のプロパティを返すことがサポートされています。 componentNameは、コンポーネント名、またはプロパティ名で区切られたコンポーネント名のどちらかを指定することができる文字列です。

// <a-entity id="box" geometry="primitive: box"></a-entity>
var entity = document.querySelector('#box');

AFRAME.utils.entity.getComponentProperty(entity, 'geometry.primitive');
AFRAME.utils.entity.getComponentProperty(entity, 'geometry|primitive', '|');
// >> 'box'

AFRAME.utils.entity.getComponentProperty(entity, 'geometry');
// >> {primitive: 'box', width: 1, ...}

これは、マルチプロパティコンポーネントのプロパティを参照する方法が必要なコンポーネントに有用です。

# .setComponentProperty (entity, componentName, value, delimiter)

Entity.setAttributeと同様に動作しますが、マルチプロパティコンポーネントの個々のプロパティを設定するためのサポートを持っています。 componentNameは、コンポーネント名、またはプロパティ名で区切られたコンポーネント名のどちらかを指定することができる文字列です。

// <a-entity id="box" geometry="primitive: box"></a-entity>
var entity = document.querySelector('#box');

AFRAME.utils.entity.setComponentProperty(entity, 'geometry.width', 1);
AFRAME.utils.entity.setComponentProperty(entity, 'geometry|height', 2, '|');
AFRAME.utils.entity.setComponentProperty(entity, 'geometry', {depth: 3});

# AFRAME.utils.styleParser

# .parse (value)

CSS スタイルのような文字列をオブジェクトにパースします。

AFRAME.utils.styleParser.parse('attribute: color; dur: 5000;')
// >> {"attribute": "color", "dur": "5000"}

# .stringify (data)

オブジェクトをCSSスタイルに似た文字列にします。

AFRAME.utils.styleParser.stringify({height: 10, width: 5})
// >> "height: 10; width: 5"

# Object Utils

# AFRAME.utils.deepEqual (a, b)

2つのオブジェクトが同じ属性と値を持つかどうかを調べます。ネストされたオブジェクトも含まれます。

deepEqual({a: 1, b: {c: 3}}, {a: 1, b: {c: 3}})
// >> true

# AFRAME.utils.diff (a, b)

2つのオブジェクトの差を返します。返されたオブジェクトのキーの集合は、どの値が等しくなかったかを示します。そしてその値の集合は、bの値となります。

diff({a: 1, b: 2, c: 3}, {b: 2, c: 4})
// >> {"a": undefined, "c": 4}

# AFRAME.utils.extend(target, source, [source, ...])

Object Assign polyfill (opens new window)

# AFRAME.utils.extendDeep (target, source, [source, ...])

Deep Assign (opens new window)

# AFRAME.utils.device

# AFRAME.utils.device.checkHeadsetConnected ()

VRヘッドセットが接続されているかどうかを、オリエンテーションデータを探して確認します。ブール値を返す。

# AFRAME.utils.device.isGearVR ()

デバイスがGear VRであるかどうかを確認します。ブール値を返します。

# AFRAME.utils.device.isOculusGo ()

デバイスがOculus Goであるかどうかを確認します。ブール値を返します。

# AFRAME.utils.device.isMobile ()

デバイスがスマートホンであるかどうかを確認します。ブール値を返します。

# Function Utils

# AFRAME.utils.throttle (function, minimumInterval [, optionalContext])

Returns a throttled function that is called at most once every minimumInterval milliseconds. A context such as this can be provided to handle function binding for convenience. The same as lodash's throttle (opens new window).

minimumIntervalミリ秒に一度だけ呼び出される、調整された関数を返します。thisのようなコンテキストを提供して、関数のバインディングを便利に処理することができます。lodashの throttle (opens new window)と同じです。

AFRAME.registerComponent('foo', {
  init: function () {
    // Set up throttling.
    this.throttledFunction = AFRAME.utils.throttle(this.everySecond, 1000, this);
  },

  everySecond: function () {
    // Called every second.
    console.log("A second passed.");
  },

  tick: function (t, dt) {
    this.throttledFunction();  // Called once a second.
    console.log("A frame passed.");  // Called every frame.
   },
});

# AFRAME.utils.throttleTick (function (t, dt) {...}, minimumInterval [, optionalContext])

Returns a throttled function that is called at most once every minimumInterval milliseconds. A context such as this can be provided to handle function binding for convenience.

minimumIntervalミリ秒に一度だけ呼び出される、調整された関数を返します。thisのようなコンテキストを提供して、関数バインディングを便利に処理することができます。

この .throttle() のバリエーションは、グローバルレンダーループから渡された t と dt のタイムスタンプを使用するため、若干パフォーマンスが高く、tick ハンドラ用に調整されています。

AFRAME.registerComponent('foo', {
  init: function () {
    // Set up the tick throttling.
    this.tick = AFRAME.utils.throttleTick(this.tick, 500, this);
  },

  /**
   * Tick function that will be wrapped to be throttled.
   */
  tick: function (t, dt) {}
});

# Miscellaneous

# AFRAME.utils.getUrlParameter (name)

URL パラメータの値を文字列として返し、それ以外の場合は空文字列を返します。

AFRAME.utils.getUrlParameter('testing');
// If visiting the current page with ?testing=aframe, this will log 'aframe'.

← Animation →

TABLE OF CONTENTS
公式ドキュメント