category icon
2021-01-11
JavaScript - Cannon.js

Cannon.js と Three.js の向きの違いを調整 (円柱、角柱)

Cannon.js
0.6.2
profile
hikaru
Software Developer / DIY'er
ts
/** 90度を示すラジアン値 */
const ANGLE90 = (Math.PI / 180) * 90;

// THREE: 六角中のMeshを生成
const mesh = new THREE.Mesh(
  new THREE.CylinderGeometry(1, 1, 3, 6),
  new THREE.MeshLambertMaterial({ color: 0xEEDBA5 })); // 適当な色

// Cannon.jsとThree.jsの向きの違いを調整するためのクォータニオン
const adjusted = new THREE.Quaternion();
adjusted.setFromEuler(new THREE.Euler(ANGLE90, ANGLE90, 0));

// 
// いろいろ省略
// 

function update() {
  // Cannon.jsからThree.jsに反映: 位置情報
  mesh.position.set(
    body.position.x,
    body.position.y,
    body.position.z);

  // Cannon.jsからThree.jsに反映: 向き情報
  mesh.quaternion.set(
    body.quaternion.x,
    body.quaternion.y,
    body.quaternion.z,
    body.quaternion.w);

  // Cannon.jsとThree.jsの向きの違いを調整
  mesh.quaternion.multiply(adjusted);
}