新年があけまして、今年こそは少しスリムになろうと運動を始めました。
去年も、一昨年もそうでした。果たしていつまで続くやら。

A-Frameで実装する際、PositionやらRotationやらを設定することが多いのですが、毎回書き方がバラバラで、好き勝手に書いているのが気になっています。
いい機会なので、どういうときにどういう書きかたになるのか整理してみようかと。

Positionの設定方法

entityにposition設定をする際は、大きく分けて

HTML中での設定
Javascript中での設定

に分かれます。

HTML中での設定

HTMLでの設定する際は考える余地もなく

<a-entity position="x y z"></a-entity>

です。
HTMLでは静的に一意に設定します。なので設定方法もこのやり方だけになります。

Javascript中での設定

こっちが面倒です。設定の方法がいくつもあります。

DOMの要素として属性に設定する。
Three.jsのメソッドを使って設定する。
A-FrameのUtilsを使って設定する。

他にもあるかな。基本的に「DOMの要素として設定」することが多いです。
というかほかの方法はよくわかっていないので・・・
なので、これを機にそれ以外の設定方法をまとめておきます。

DOMの要素として設定

setAttributeを使います。
スペース区切りでXYZの順で文字列を作成して設定します。

var box = document.getElementById("box");

// 文字列で設定
box.setAttribute("position", "x y z")

// 連想配列形式で設定
box.setAttribute("position", {x:-1, y:-1, z:-3});

// Vector3形式データも設定できる。
var pos = new THREE.Vector3(-1, 1.5, -3);
box.setAttribute("position", pos);

単純にXYZの値を変更する際はこれが一番楽です。
ですが、例えばYだけを変更する場合、一度文字列加工したうえで設定しなければならず、とても面倒で煩雑なソースになってしまいます。

ということで、知りたいのはこれから下のThree.jsとA-Frameの部分について。
ブログを書きながら調べながら、実装して確認しながらまとめていきます。

Three.jsのメソッドを使って設定

Three.jsでpositionは3つの数値項目を保有するVector3クラスを使って表します。
Vector3の説明は以下を参照。

three.js / documentation

したがって、あるエンティティのpositionを変更したい場合、エンティティからVector3のposition情報を取得し、そのposition情報が保有するVector3のメソッドを使用して変更します。
A-Frameエンティティのpositionは、entity.object3D.positionで取得できます。

var box = document.getElementById("box");
box.object3D.position.set(-1, 2.5, -3);

設定する値がすでにVector3の場合は、こんな書きかたもできます。

var box = document.getElementById("box");
var pos = new THREE.Vector3(-1, 1.5, -3);
box.object3D.position.copy(pos);

それから、XYZのうち一部だけ変更したい場合はこんな感じ

var box = document.getElementById("box");
// メソッドを使って設定
box.object3D.position.setY(2);
// もしくはプロパティ直指定
box.object3D.position.y = 2;

A-FrameのUtilsを使って設定

A-Frameには便利なUtilityがいくつか用意されています。

Utils – A-Frame

そのうち、position設定で使えるのは、AFRAME.utils.entity.setComponentProperty です。

var box = document.getElementById("box");
AFRAME.utils.entity.setComponentProperty(box, 'position', "-1 -2 -3");
// 設定値としては上記文字列以外に、連想配列とVector3も設定可能です。

長いですね。こんな長いの打ちたくないですね。
なのでposition設定で普通はこのUtilityは使わないでしょう。
この関数は他の設定において有用なのですが、それは別の機会に。

まとめ

今までなんとなく使っていたのですが、今回まとめることによりThree.js側で使うべきか、DOM設定として使うべきかなど自分の中で使用用途に応じて切り替えることができそうです。
今まで毎回悩んでいたのが馬鹿らしくなりました。

こういうノウハウや経験則で培ってきたものってDocumentには載っていないものです。自分の知識を整理する意味でも、できるだけブログにアップしていこうと思います。

以上

忘れないうちにメモする

A-FrameでPositionを設定するときの書き方について