「A-Frame」の記事 - Crieit

A-FrameでVR選手ロッカーを作ってみた話

2020-09-01T23:08:37+09:00

①NextJSでaframe-reactを動かす

aframe-react

ReactJSでAFrameを動かすときはこれ。
aframe-react

NextJSは一部SSR(サーバサイドレンダリング)が走るので、クライアントで動作する状態になってからロードする必要がある。
参考: aframe-next-static

windowというグローバル変数が使えるようになればクライアント側で動作する状態なので、レンダリング完了フラグで管理する。

if (typeof window !== "undefined") {
      require("aframe");
      setRendered(true);
    }

②aframe-reactで書いてみる

aframeは配置するものが多いと意外とソースが長くなるので、
1個のLockerを構成する単位でコンポーネント化しました。
選手の情報をAPIから取得して、奇数と偶数の場合で振り分けています。

if (!rendered || !teamMembers) {
    return <>;
  }
return (
    
      {teamMembers.map((member,idx)=>(
        <>
        {idx%2 === 0
          ?
          :
        }
        
      ))}
      
      
    
  );

a-skyは背景、cameraはカメラの初期位置を定義しています。

これがRightLockerのソースです。
プログラム的に難しいことはないのですが、
座標や光源の調整などが結構面倒でした。
(..planeって光透過すんの？)

import { Entity } from "aframe-react";
import { Player } from "../../model/typedef";

type diff={
    x:number,
    y:number,
    z:number,
    rot_x:number,
    rot_y:number,
    rot_z:number,
    member:Player
}

const RightLocker:React.FC = ({x,y,z,rot_x,rot_y,rot_z,member}) => {
  return (
    <>
    {{ primitive: "plane", width:1, height:2}}
      material={{ src: "/images/wood.jpg",alphaTest:0.1 }}
      position={{ x: x+0.7, y: y, z: z-4.3}}
      rotation={{ x: rot_x, y: -135+rot_y, z: rot_z }}
    />
    {{ primitive: "plane", width:1, height:2}}
      material={{ src: "/images/wood.jpg", transparent:false}}
      position={{ x: x+0.7, y: y, z: z-5 }}
      rotation={{ x: rot_x, y: rot_y-45, z: rot_z }}
    />
    {{ primitive: "plane", width:1, height:2}}
      material={{ src: "/images/wood.jpg"}}
      position={{ x: x, y: y, z: z-4.3 }}
      rotation={{ x: rot_x, y: rot_y-45, z: rot_z }}
    />
    {{ primitive: "box", width:0.5, height:0.3}}
      material={{ color:'gray' }}
      position={{ x: x+0.5, y: y-1, z: z-4.5 }}
      rotation={{ x: rot_x, y: rot_y-45, z: rot_z }}
    />
    {{ primitive: "plane", width:1, height:2}}
      material={{ src: member.ogp_image}}
      position={{ x: x+0.7, y: y, z: z-4.3}}
      rotation={{ x: rot_x, y: -135+rot_y, z: rot_z }}
    />
    {{type:"spot"}}
        material={{color:'yellow'}}
        position={{ x: x+0.3, y: y+1.3, z: z-4.5 }}
        rotation={{ x: rot_x-90, y: rot_y-10, z: rot_z-10 }}
    />
    
    );
};
export default RightLocker;

DEMO

まだ本サイトにはデプロイしていませんが、team/[チームID]/vr_lockerで各チームのVRロッカーを見ることができます。
- キャップ野球情報局・VRロッカー

A-FrameでVRモードに切り替える方法を追加する

2019-08-18T15:51:04+09:00

A-Frameはページ表示時にはVRモードではなくブラウザで表示するための通常の3Dモードで描画されており、右下のメガネボタンをクリックするとVRモードに切り替わる。

ただしこれを使わなくても適宜自由にVRモードに切り替えたりVRモードから脱出したりすることができる。

具体的にはsceneコンポーネントにそれらのメソッドが用意されている。

VRモードに切り替えるメソッド

例えばボタンをクリックしたときなどにVRモードに切り替えたい場合は下記のような形。

document.querySelector('a-scene').enterVR()

exitVRというメソッドもある。

イベント

VRモードに切り替わったり出たりした場合にイベントが発生するのでそのタイミングで処理を入れることも出来る。具体的にはenter-vrやexit-vrイベント。

他にもフォグ（霧のようなエフェクト）を入れたりもできるためちらっとドキュメントを見てみると面白い。

Scene – A-Frame

aframe-super-keyboardをVR内で動作させる

2019-07-28T23:30:51+09:00

A-FrameのVR内で文字を入力させたいと思い探してみるとaframe-super-keyboardというものが見つかった。しかし試してみるとどうもVR内ではうまく動かない。よく見るとデモもブラウザ上でしか動いていない。

一応なんとか動かせたのでそのメモ。

handを指定する

super-keyboardコンポーネントの属性にhandというプロパティがある。これはデフォルトでは

[cursor], [vive-controls], [tracked-controls], [oculus-touch-controls], [windows-motion-controls], [hand-controls], [daydream-controls] [cursor] > [raycaster]

となっている。

ということでもしかしたらデモも動く場合があるのかもしれない。ただ、コントローラのraycasterの階層の仕様が違ったり自分でraycasterを作っている場合は動かないので、ここを指定してあげる必要がある。

僕の場合もraycasterを自分で定義していたのでその要素を指定した。

handに指定したものが複数あるとおかしくなる

super-keyboardの動作仕様として、キーボード画像のhoverしたところの位置を判定して色替えを行っている。それをそのままキーボードの入力としているため、複数の要素でhoverできたりするとどうもおかしくなるっぽい。というか、検索した最初の要素でしか動かないっぽいので、右手では動かないけど実は左手では動く、みたいなパターンもあるっぽい。

うまく動かない場合は一度handの指定では一つの要素だけ存在するようにして試すとうまくいく可能性がある。

A-Frameでコントローラの角度を正確に取得する

2019-07-18T22:03:57+09:00

A-Frameでコントローラの向きに合わせて処理をしたい時があると思う。コントローラの動きに追従するメニューとかであれば子要素として表示すれば良いだけなので問題ないが、例えば銃を撃って弾を発射する場合などは完全に別オブジェクトとして生成する必要があるためコントローラの角度を取得してそれを利用して弾の角度を初期化したりする必要がある。

A-Frameだとrotationという属性があるためそれでオブジェクトの角度を利用することもできるが、それだとうまくいかない。

Oculus Questのコントローラの角度が謎でも書いている通り、rotationはうまく値が取れない。

じゃあどうするかというと、A-Frameは内部的にはthree.jsが使われているため、そのあたりの機能を利用していく。

A-Frameコンポーネント内で参照できる要素からは、下記のようにthree.jsのObject3Dが参照できるようになっている。

this.el.object3D

これを利用すればA-Frame単体では難しいような3Dの操作もできるようになる。詳しい傾きについてはQuaternionを利用することができる。たとえば下記のような感じ。

    const q = new Quaternion()

    const gunQuaternion = new Quaternion()
    this.el.object3D.getWorldQuaternion(gunQuaternion)
    q.multiply(gunQuaternion)

    bullet.object3D.applyQuaternion(q)

Oculus Questのコントローラの角度が謎

2019-07-03T22:06:49+09:00

A-FrameでOculus Questのコントローラを使う場合、oculus-quest-controlsコンポーネントを使うことができる。この動きに連動して銃を撃つようなアクションを作っていたのだが、どうもどうやっても角度が合わない。そのためちょっと調べてみたところ謎の角度になっていることがわかった。

ベースの角度

手を真下に下ろしているような状態がベースの角度となり、x, y, zともに0になる。

上下の動き

その状態からそのまま手を上に上げるとxの角度。段々と180に近づいていき、そのまま後ろに行くと-180度から-0に近づいていく。

左右の動き

次に真下の状態から左右方向に手を上げるとzの角度。手を右方向に上げていくと180に向かっていき、左方向に傾けると-180度に向かっていく。

yの傾き

yの傾きは、手を真下に下ろしたまま手の位置を固定したまま自分が手を中心に回るような動きとなる。これがちょっと不思議。

左回りに回転させると、段々と90度に近づいていく。ところが、90度を超えてからは今度はだんだんとそのまま0に近づいていく。右回りも同様で、段々と-90度に近づき、そこを経由して0に戻っていく。

ここの挙動が他と変わっているおかげで連動して生成する物体の傾きがどうしてもうまくあわなかったっぽい。

もしかしたら知っている人からすれば一般的な話なのかもしれないが、とりあえずメモ。

ちなみにダンプは適当にa-textを配置してそれに値をsetAttribute('value', value)して直接VR上で見た。

Oculus Questのコントローラでaframe-teleport-controlsを使う

2019-06-29T22:02:34+09:00

A-Frameには aframe-teleport-controls という、VR空間内を近くにテレポートしつつ移動するためのコンポーネントがある。

VR空間内は勝手に自分のカメラの位置が移動してしまうと乗り物酔いと同じ原理で酔ってしまう。そのためそれを避けるためテレポートが役立つ。

ただ、Oculus Questで試すとこのリポジトリにかかれているサンプルのコードだとデフォルトでは動かない。というのも、上記の画像のとおりにコントローラが違うためデフォルトで設定されているボタンが異なる。

下記のようにボタンを例えばトリガーボタンに変更したりすれば動作するようになる。これで簡単にワープすることができる。

        teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head; button: trigger;"

TypeScriptでA-Frameのコンポーネントを書く

2019-06-24T19:48:11+09:00

TypeScriptを使っているプロジェクトでA-Frameのコンポーネントを書く時の方法。まだざっと試したところなのでおかしなところがあれば適宜調整が必要かも。

とりあえず型を入れる。

yarn add @types/aframe

これで適当なtsファイル内でAFRAME.registerComponentとかを実行しても未定義エラー等が発生しなくなるため定義できるようになる。

また、下記のようにimportして実行する方法もある。

import { registerComponent } from 'aframe'

registerComponent('my-component', {

コンポーネント内部で使うパラメータはオブジェクト内に定義すればいい。JavaScriptの場合だと、initメソッド内で初期化したりするが、それだと型エラーになるので要定義。

registerComponent('my-component', {
  hoge: true,
  fuga: 100,

というか、型定義のテストファイルに一通りのものが書かれている。

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/aframe/test/aframe-tests.ts

const Component = registerComponent('test-component', {
    schema: {
        myProperty: {
            default: [],
            parse() {
                return [true];
            }
        },
        string: { type: 'string' },
        num: 0
    },
    init() {
        this.data.num = 0;
        this.el.setAttribute('custom-attribute', 'custom-value');
    },
    update() {},
    tick() {},
    remove() {},
    pause() {},
    play() {},

    multiply(f: number) {
        // Reference to system because both were registered with the same name.
        return f * this.data.num * this.system!.data.counter;
    }
});

他にも色々書かれているのでこちらを参考にしていけばなんとかなるのではないかと思う。

プロパティの型を明示的に指定する場合は？

事前にinterfaceを定義する感じ？　ただこれだとメソッドも再定義しないといけないので非常に面倒。何か良い方法は無いのだろうか。

A-FrameでVRラジコンを作る

2019-06-17T23:27:42+09:00

前回3D空間でキーボード操作のラジコンを作ったが、それをOculusQuestのVR空間内でスティックで操作して遊べるようにしてみた。前回のは下記。

A-Frameでキーボード操作のラジコンを作ってみる

これにスティックによる処理を追加していく。

スティック操作による値を取得

左手右手の各コントロールコンポーネントはtracked-controlsというをベースとしており、これのaxismoveイベントを使うことでスティックの傾きを取得することができる。

そのためイベント受信用のコンポーネントを作り、それをhand-controlsに割り当てれば取得することができる。例えば下記のような感じで左手用、右手用のcar-controller-left, car-controller-rightコンポーネントを作った場合は下記のようになる。

コンポーネントは下記のような感じ。左手の上下でスピード、右手の左右でハンドルをさばく。

    AFRAME.registerComponent('car-controller-left', {
      init: function () {
        this.el.addEventListener('axismove', function (e) {
          const car = document.querySelector('[car]').components.car
          car.onAxisMoveSpeed(e)
        })
      }
    })

あとはもう面倒になったので傾きも使わず前回作った処理をそのまま呼んでいるだけ。

      onAxisMoveSpeed: function(e) {
        if (e.detail.axis[1] == 0) {
          this.speeding = null
        } else if (e.detail.axis[1] > 0) {
          this.speeding = 'down'
        } else if (e.detail.axis[1] < 0) {
          this.speeding = 'up'
        }
      },
      onAxisMoveAngle: function(e) {
        if (e.detail.axis[0] == 0) {
          this.rotating = null
        } else if (e.detail.axis[0] > 0) {
          this.rotating = 'right'
        } else if (e.detail.axis[0] < 0) {
          this.rotating = 'left'
        }
      },

実際のもの

実際にVR上でプレイしたものを録画したやつ。

VRでのスティック操作バージョン（モデル変える前に撮影したやつ） pic.twitter.com/9v34bxapMu
— だら🍔技術系投稿サービスや100の質問メーカー運営中 (@dala00) June 17, 2019

GitHubページで実際に試せる。実機がない人はキーボードのWASDでもOK。

https://dala00.github.io/a-frame-car-sample/

ソースはGitHubにもアップしてある。

dala00/a-frame-car-sample: Car control sample with A-Frame

まとめ

めちゃくちゃ簡単なのでぜひみんなやってみましょう。

次はFirebaseのRealtime Databaseいれてみんなで同時に部屋の中にいる、みたいなの試したい。

A-Frameのコンポーネント内で他のコンポーネントを参照する

2019-06-17T09:49:25+09:00

A-Frameはコンポーネント単位で簡単に処理を書くことができるが、時には他の要素の座標等の情報を取得したいときなどがある。そういう場合は他のコンポーネントを参照する必要があるのだが、その方法が公式マニュアルに書かれていた。

Accessing a Component’s Members and Methods

具体的には例えば下記のようなfooコンポーネントを割り当てられた要素があるとする。

それにアクセスするには下記のような形。

document.querySelector('[foo]').components.foo;

普通にquerySelectorで要素を取得する。その要素にcomponentsというプロパティがあるようなので、それ経由で参照できる。あとはそのコンポーネントの値を取得したりメソッドを呼んだりできる。

A-Frameでキーボード操作のラジコンを作ってみる

2019-06-17T09:11:38+09:00

A-FrameでVR上で動くラジコンを作ってみようと思ったが、とりあえずブラウザ上でテストできないとデバッグ辛いかなと思い、まずはVRではなく普通にブラウザの3D空間上でキーボード操作ができるようにしてみた。

単にVR機器を持ってない人もブラウザ上で体験できたらいいかなというのもあるし、そうでなくてもプログラムを変える度にOculus Questをつけたり外したりするのは結構面倒なので。

キーボード操作の事前準備

デフォルトでWASDキーが空間移動に使われているので、下記の方法で無効にする。

A-Frameでデフォルトのキーボード操作を無効にする

3Dモデル用のコンポーネントを作成

とりあえず3Dモデルの位置や角度を調整したりするために、動かすオブジェクト用のコンポーネントを作成する。

何をやっているかというと、キーボードイベントを設定し、キーが押されたらステータスを変更する処理を追加し、tickという常時呼ばれ続けるメソッドの中でそのステータスに応じて車を動かしている。

    AFRAME.registerComponent('car', {
      init: function () {
        window.addEventListener('keydown', this.onKeyDown.bind(this))
        window.addEventListener('keyup', this.onKeyUp.bind(this))
        this.rotating = null
        this.speeding = null
        this.speed = 0.0
      },
      onKeyDown: function (e) {
        if (e.keyCode == 65) {
          this.rotating = 'left'
        } else if (e.keyCode == 68) {
          this.rotating = 'right'
        } else if (e.keyCode == 87) {
          this.speeding = 'up'
        } else if (e.keyCode == 83) {
          this.speeding = 'down'
        }
      },
      onKeyUp: function (e) {
        if (e.keyCode == 65 && this.rotating == 'left') {
          this.rotating = null
        } else if (e.keyCode == 68 && this.rotating == 'right') {
          this.rotating = null
        } else if (e.keyCode == 87 && this.speeding == 'up') {
          this.speeding = null
        } else if (e.keyCode == 83 && this.speeding == 'down') {
          this.speeding = null
        }
      },
      tick: function () {
        if (this.speeding != null) {
          const direction = this.speed > 0 ? 1 : -1
          if (this.rotating == 'left') {
            this.el.object3D.rotateY(direction * Math.PI / 120)
          } else if (this.rotating == 'right') {
            this.el.object3D.rotateY(direction * -Math.PI / 120)
          }
        }
        if (this.speeding == 'up') {
          this.speed = Math.min(this.speed + 0.02, 0.2)
        } else if (this.speeding == 'down') {
          this.speed = Math.max(this.speed - 0.02, -0.2)
        }
        const position = this.el.getAttribute('position')
        const rotation = this.el.getAttribute('rotation')
        const angle = Math.PI * rotation.y / 180
        position.x += this.speed * Math.sin(angle)
        position.z += this.speed * Math.cos(angle)
        this.el.setAttribute('position', position)
        if (this.speed > 0) {
          this.speed = Math.max(this.speed - 0.01, 0)
        }
        if (this.speed < 0) {
          this.speed = Math.min(this.speed + 0.01, 0)
        }
      }
    })

あとはこれを実際の3Dモデルに紐付けるだけ。

下記が実際にブラウザ上で試してるところ。

a-frameでラジコンのサンプルみたいなの。VRでやりたいんだけどデバッグつらそうなのでとりあえずキーボード操作でできるように。 pic.twitter.com/Zc7w4xz64V
— だら🍔技術系投稿サービスや100の質問メーカー運営中 (@dala00) June 16, 2019

GitHubページで実際に試せる。WASDキーで操作。

https://dala00.github.io/a-frame-car-sample/

ソースはGitHubにもアップしてある。

dala00/a-frame-car-sample: Car control sample with A-Frame

物理エンジンを使う場合

今回は物理エンジンを使っておらず、直接計算して要素の属性を更新する方法で試している。物理エンジンを使う場合、内部の角度やvelocityを利用して動かす形にする必要があるので今回の形では動かせない。

まとめ

とりあえずブラウザ上でキーボードを使って操作できるようにした。VR用にスティック操作などを入れる場合はデバッグが必要な箇所が多いと非常に大変なので、このようにして基本的な処理はなるべく使いまわすことでなるべく簡単に開発ができるようにした感じ。

スティック操作ももうできているのでまた近日中に記事を書く。

A-Frameでキーボード操作を行う

2019-06-17T06:45:17+09:00

A-Frameでkeydownやkeyup等のキーボードイベントを使ってブラウザ上で3D空間上の何かしらのオブジェクトを操作したりする方法。VRモードではなく、その前のブラウザモードでも何かしらの操作をできるようにしておきたい場合など。

操作用のコンポーネントを作成

下記のように、キーボードイベントをトラッキングしたコンポーネントを作成する。とくにいい方法があるわけではなさそうなので直接windowのイベントを利用する。

    AFRAME.registerComponent('key-controllable', {
      init: function () {
        window.addEventListener('keydown', this.onKeyDown.bind(this))
        window.addEventListener('keyup', this.onKeyUp.bind(this))

実際の処理は通常のWebのプログラミングと同様。

      onKeyDown: function (e) {
        if (e.keyCode == 65) {
          this.rotating = 'left'
        }
      }

ちなみにWASDキーを使いたい場合は前提として、デフォルトではWASDキーがカメラの移動に使用されているため下記の方法で無効にしておく必要がある。

A-Frameでデフォルトのキーボード操作を無効にする

あとはこれを動かしたいオブジェクトに指定する。

A-Frameでデフォルトのキーボード操作を無効にする

2019-06-17T06:28:39+09:00

A-FrameはVRモードに入る前のブラウザ表示モードだと、キーボードのWASDキーを使って空間を移動することができるようになっている。これはデフォルトでwasd-controlsコンポーネントが有効になっているため。

便利ではあるのだが、ブラウザ上でもWASDキーで何かしらの操作をしたい場合には邪魔になってしまうため、無効にする必要がある。下記のようにカメラにwasd-controls-enabled属性を指定することで無効にできる。

A-FrameのSuper HandsでVR空間のオブジェクトを掴んでみる

2019-06-12T22:28:14+09:00

A-Frameという、マークアップとJavaScriptを使ってOculus Quest等のブラウザだけでVRアプリケーションを作ることのできるフレームワークがあります。

サンプルなどを試してみると本当に簡単にVR空間を作ることができて面白いのですが、やはりWebエンジニアとしてはただ物を配置するだけではなく色々とインタラクティブにVR空間で遊べるようにしてみたいと感じます。

とくにOculus Questのようなコントローラは物を掴んだりという操作が非常にすべてが直感的で、VRをはじめてみて一番の衝撃でもありました。なんとかそのあたりを簡単にできるようにしたいと思い調べてみたところ、下記のライブラリが見つかりました。

Super Hands

wmurphyrd/aframe-super-hands-component: 👐All-in-one natural hand controller, pointer, and gaze interaction library for A-Frame

公式のマニュアルでも紹介されており、恐らく簡単にコントローラを使えるようにしてくれているのだと思います。

実際に上記のページのサンプルを試してみました。

こんな感じで手が表示され、青いボックスを掴んだり、両手で掴むと拡大縮小することもできます。GitHubのREADMEを見るとわかりますが、ソースもたったこれだけです。

注意点

多分ですが、ローカルやCodePenなどでもうまく動かなかった気がします。手のモデルを読み込んでいるのでとりあえずサンプルのHTMLをどこかWeb上にアップしてアクセスして試さないとダメっぽいです。

ですのでもしかしたら公式で紹介しているコントローラなどでもうまく手を使ったりすることができるのかもしれません。

ちなみにサーバーアップされているサンプルが下記です。（対応端末でないと手は出てきません）

https://wmurphyrd.github.io/aframe-super-hands-component/examples/physics/

まとめ

とにかくA-Frameでできることのサンプルやプレビュー画像がWeb上に不足しているので、何かしら試したら投稿していってみたいと思います。