【A-Frame】物理シミュレーションライブラリaframe-physics-systemをA-Frame 1.2.0以降に対応する
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への置換方法もおおよそ知っているわけですから、対応してみました。
注意:完全対応の保証はありません。自己責任となります。あしからず
やり方
バージョン
次の通りです。
- A-Frame version 1.2.0
- 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 とか書かれているところですね。
- Geometryでnewしている箇所を、BufferGeometryでnewするように書き換え。
- 「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