ryo-i
commented
1 year ago cannon-esのドキュメントではcannon-esのposition、quaternionをそのままthree.jsに設定していた
sphereMesh.position.copy(sphereBody.position)
sphereMesh.quaternion.copy(sphereBody.quaternion)TS環境では下記の型エラーになる
Argument of type 'Vec3' is not assignable to parameter of type 'Vector3'.
Type 'Vec3' is missing the following properties from type 'Vector3': isVector3, setScalar, setX, setY, and 59 more.
Argument of type 'import("math/Quaternion").Quaternion' is not assignable to parameter of type 'THREE.Quaternion'.
Type 'Quaternion' is missing the following properties from type 'Quaternion': isQuaternion, setFromRotationMatrix, setFromUnitVectors, angleTo, and 18 more.キャスト関数を作る
const cannonVec3ToThree = (vec3) => {
return new THREE.Vector3(vec3.x, vec3.y, vec3.z);
};
const cannonQuaternionToThree = (quaternion) => {
return new THREE.Quaternion(quaternion.x, quaternion.y, quaternion.z, quaternion.w);
};キャスト関数を実行することでエラーがなくなった
sphereMesh.position.copy(cannonVec3ToThree(sphereBody.position));
sphereMesh.quaternion.copy(cannonQuaternionToThree(sphereBody.quaternion));
物理エンジンのドキュメントをいくつか巡回したがThree.jsと連携した事例が意外に少なかった。 cannon.jsの後継のcannon-esのドキュメントは事例があったのでこちらで初体験してみる。
ドキュメント https://pmndrs.github.io/cannon-es/docs/index.html
サンプル https://pmndrs.github.io/cannon-es/
GitHub https://github.com/pmndrs/cannon-es
npm https://www.npmjs.com/package/cannon-es
他参考 https://threejs.org/docs/#manual/ja/introduction/Libraries-and-Plugins https://qiita.com/naotaro0123/items/96a0a059ce2983ae9da7