【A-Frame】物理シミュレーションライブラリaframe-physics-systemをA-Frame 1.2.0以降に対応する

Pocket
LinkedIn にシェア
LINEで送る

A-Frameは建築VRでもよく用いられている気がしますが、当然ながら壁をすり抜けないようにしたい。しかしA-Frame標準には衝突判定関連のライブラリないので調達が必要ですね。
そこでメジャーなのがaframe-physics-system。物理シミュレーション全般を実装したいときはaframe-physics-systemを使うのが大体の方の手段だと思いますが、ある日A-Frameをバージョン1.0.0から1.2.0にアップデートしたら、物理シミュレーションが動かなくなった。

原因

A-FrameからGeometryクラスが消滅したからです。Deprecate扱いでしたけどr125から正式に消えました。
一方でaframe-physics-systemはnew Geometryをベースに実装されているため「unidentified class ‘Geometry’」エラーが出ているってわけです。
もう少し詳しく言いますと、今まではA-Frame側でGeometryとBufferGeometryの2つがあったのですが、色々あってGeometryは消去されて、BufferGeometry一本化されています。

aframe-physics-systemのIssueでも結構前から話題になっているようでしたが、まだ直ってないみたいです。

GeometryからBufferGeometryへの置換方法もおおよそ知っているわけですから、対応してみました。

注意:完全対応の保証はありません。自己責任となります。あしからず

やり方

バージョン

次の通りです。

  1. A-Frame version 1.2.0
  2. aframe-physics-system version 4.0.0

aframe-physics-system/dist/aframe-physics-system.jsファイルを修正します。

点在している

「new THREE.Geometry()」の箇所を全部「new THREE.BufferGeometry()」に置換します。2か所だと思いますが念のため全部調べてください。

//var geometry = new THREE.Geometry(); // remove
var geometry = new THREE.BufferGeometry(); // modify

 

80~100行目付近

case CANON.Shape.types.CONVEXPOLYHEDRONの中身を修正。かなりシンプルになる、と思われます。

        case CANNON.Shape.types.CONVEXPOLYHEDRON:
            //var geo = new THREE.Geometry();
            var geo = new THREE.BufferGeometry();//yanai

            // Add vertices
geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(shape.vertices), shape.vertices.length)); // add
/* not needed
            for (var i = 0; i < shape.vertices.length; i++) {
                var v = shape.vertices[i];
                //geo.vertices.push(new THREE.Vector3(v.x, v.y, v.z));yanai out 
                geo.setAttribute('position', new THREE.BufferAttribute(v, 1));//yanai modify
            }

            for(var i=0; i < shape.faces.length; i++){
                var face = shape.faces[i];

                // add triangles
                var a = face[0];
                for (var j = 1; j < face.length - 1; j++) {
                    var b = face[j];
                    var c = face[j + 1];
                    //geo.faces.push(new THREE.Face3(a, b, c));
                    geo.setAttribute('position', new THREE.BufferAttribute(v, 1));//yanai
                  }
            }
*/
            geo.computeBoundingSphere();
            geo.computeFaceNormals();
            mesh = new THREE.Mesh( geo, this.currentMaterial );
            break;

 

14340行目付近

やることは2つ。
1行でずらーっと書かれている箇所があるのですが、ここにはライブラリから既に削除された「Geometry.fromBufferGeometry()」関数が記述されていますので書き換えをします。
t.Geometry とか i.fromBufferGeometry とか書かれているところですね。

  1. Geometryでnewしている箇所を、BufferGeometryでnewするように書き換え。
  2. 「fromBufferGeometry」を「clone」に書き換えます。
    厳密に言うと黒に近いグレーな対処ですけど、手っ取り早いっちゃあ早い。
    (コード適当に見た感想:たぶんfromBufferGeometryは、関数にしたgeometryの頂点、法線、面とかの基本情報だけcloneしているように見えます。)


・・・
//i=new t.Geometry,o=new t.Geometry;//yanai remove
i=new t.BufferGeometry,o=new t.BufferGeometry;//yanai modify
・・・
//i.fromBufferGeometry(r[0].geometry):i=r[0].geometry.clone(),//yanai
i.clone(r[0].geometry):i=r[0].geometry.clone(),//yanai modify
・・・
//if(n.geometry.attributes.position&&n.geometry.attributes.position.itemSize>2){
//var h=new t.Geometry;
//h.fromBufferGeometry(n.geometry),//yanai
if(n.geometry.attributes.position&&n.geometry.attributes.position.itemSize>2)
{var h=new t.BufferGeometry;
h.clone(n.geometry),
・・・

修正の取りこぼしがあればブラウザのF12でエラーを起こしている行番号を確認しましょう。

完成

動きました。

参考サイト

https://github.com/n5ro/aframe-physics-system
https://github.com/aframevr/aframe
https://qiita.com/masato_makino/items/2ad5b1eb01a118d0a155
https://qiita.com/izumi_ikezaki/items/9c43901c9b8f67423f49
https://threejsfundamentals.org/threejs/lessons/ja/threejs-custom-buffergeometry.html
https://github.com/n5ro/aframe-physics-system/issues
https://github.com/mrdoob/three.js/issues/14857
https://discourse.threejs.org/t/three-geometry-will-be-removed-from-core-with-r125/22401/41

コメントを残す