Three.js備忘録（６）

//Worldオブジェクトを作成して、物理世界を初期化
const world = new CANNON.World()
//(最適化)衝突判定のためのBroadphaseアルゴリズムを設定
world.broadphase = new CANNON.SAPBroadphase(world)
//(最適化)オブジェクトが動かない場合に物理計算を省略（スリープ状態にする）ことを許可
world.allowSleep = true
//重力の方向と大きさを設定します。通常、地球上の重力加速度
world.gravity.set(0, - 9.82, 0)

//物理世界
const world = new CANNON.World()
world.broadphase = new CANNON.SAPBroadphase(world)
world.allowSleep = true
world.gravity.set(0, - 9.82, 0)
// キューブ
const geometryCube = new THREE.BoxGeometry(1,1,1);
const materialCube = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometryCube, materialCube);
cube.position.y = 2;
scene.add(cube);
//物理エンジンキューブ
const cubeShape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5));
const cubeBody = new CANNON.Body({
    mass: 1, // 質量
    position: new CANNON.Vec3(0, 2, 0), // 初期位置
});
cubeBody.addShape(cubeShape); // 形状を追加
world.addBody(cubeBody); // 世界に追加
// 床
const geometryFloor = new THREE.PlaneGeometry(10, 10);
const materialFloor = new THREE.MeshBasicMaterial({color: 0xdddddd});
const floor = new THREE.Mesh(geometryFloor, materialFloor);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -2; //位置を追加
scene.add(floor);
//物理エンジン床
const groundShape = new CANNON.Plane(); // Plane形状は無限に広がる平面です
const groundBody = new CANNON.Body({
    mass: 0, // 質量0は動かないオブジェクトを意味します
});
groundBody.addShape(groundShape);
// 床を水平にする　　
//または、setFromAxisAngle(new CANNON.Vec3(-1, 0, 0), Math.PI / 2)
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); 
groundBody.position.y = -2;　
world.addBody(groundBody); // 世界に追加

const animate = function () {
  requestAnimationFrame(animate);
  
  // 物理エンジンの計算 物理エンジンは毎秒60回更新されます
  world.step(1 / 60);
  
  // 物理エンジンでの位置と回転をThree.jsのオブジェクトに反映
  cube.position.copy(cubeBody.position);
  cube.quaternion.copy(cubeBody.quaternion);

  renderer.render(scene, camera);
};
animate();

const iceMaterial = new CANNON.Material("ice");
iceMaterial.friction = 0.1;  // 低摩擦
iceMaterial.restitution = 0.2;  // 低反発

const plasticMaterial = new CANNON.Material("plastic");
plasticMaterial.friction = 0.4;  // プラスチックの摩擦
plasticMaterial.restitution = 0.6;  // プラスチックの反発

//マテリアルが接触した場合の ContactMaterialを設定
const icePlasticContactMaterial = new CANNON.ContactMaterial(
　　iceMaterial, 
    plasticMaterial, 
  {
    friction: 0.25,  // ここで摩擦係数を設定
    restitution: 0.4  // ここで反発係数を設定
　}
);
// ワールドに接触設定を追加
world.addContactMaterial(icePlasticContactMaterial);

//各物体に適用
const body1 = new CANNON.Body({
  mass: 1,
  material: iceMaterial
});
const body2 = new CANNON.Body({
  mass: 1,
  material: plasticMaterial
});

const windForce = new CANNON.Vec3(0.5, 0, 0);  // x方向に力を適用
const animate = function () {
  requestAnimationFrame(animate);
 // 風の力を適用
  cubeBody.applyForce(windForce, cubeBody.position);
  world.step(1 / 60);
  cube.position.copy(cubeBody.position);
  cube.quaternion.copy(cubeBody.quaternion);
  renderer.render(scene, camera);
};
animate();

body.addEventListener('collide', function(event) {
  console.log('衝突を検知');
  // ここで何らかの処理を行う
});

//コールバック関数に渡される eventオブジェクトを使用して詳細情報を取得できます
//例
body.addEventListener('collide', function(event) {
  const impactStrength = event.contact.getImpactVelocityAlongNormal();
  if (impactStrength > 1.5) {
    console.log('強い衝撃を検知');
  }
});

body.addEventListener('sleep', function() {
  console.log('sleeping');
});

body.addEventListener('wakeup', function() {
  console.log('woke up');
});

const hingeConstraint = new CANNON.HingeConstraint(bodyA, bodyB, {
  pivotA: new CANNON.Vec3(0, 0, 0),
  axisA: new CANNON.Vec3(0, 1, 0),
  pivotB: new CANNON.Vec3(0, 1, 0),
  axisB: new CANNON.Vec3(0, 1, 0)
});
world.addConstraint(hingeConstraint);

const distanceConstraint = new CANNON.DistanceConstraint(bodyA, bodyB, distance);
world.addConstraint(distanceConstraint);

const lockConstraint = new CANNON.LockConstraint(bodyA, bodyB);
world.addConstraint(lockConstraint);

const pointToPointConstraint = new CANNON.PointToPointConstraint(
  bodyA, new CANNON.Vec3(0, 0, 0),
  bodyB, new CANNON.Vec3(1, 1, 1)
);
world.addConstraint(pointToPointConstraint);

<div id="canvas" style="width:100%; height:300px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
<script>
  const container = document.getElementById('canvas');
  const containerWidth = container.offsetWidth;
  const containerHeight = container.offsetHeight;
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, container2Width / container2Height, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(containerWidth, containerHeight);
  container.appendChild(renderer.domElement);
  camera.position.set(0, 0, 1);
  camera.lookAt(0, 0, 0);
  
  const world = new CANNON.World();
  world.gravity.set(0, -9.81, 0);
  
  const col = 10;
  const row = 10;
  const clothSize = 1;
  const dist = clothSize / col; //パーティクル間の距離
  const shape = new CANNON.Particle();
  const particles = [];
//各パーティクルのCANNON.Bodyを作成  
  for (let i = 0; i <= col; i++) {
    particles.push([]);
    for (let j = 0; j <= row; j++) {
      const positionX = (i - col * 0.5) * dist;
      const positionY = (j - row * 0.5) * dist;
      const positionZ = 0;
      const initialPosition = new CANNON.Vec3(positionX, positionY, positionZ);
      const particle = new CANNON.Body({
     //一番上を固定して他の点を自由に動かすため
     //現在の行数が総行数と等しい場合、質量（mass）を0
        mass: j === row ? 0 : 1,
        shape,
        position: initialPosition,
     //パーティクルが布の上端からどれだけ離れているかを示し、これに-0.1を掛けて初期速度を計算
     //布の下端がより速く動き、上端がほぼ動かない
        velocity: new CANNON.Vec3(0, 0, -0.1 * (row - j))
      });
      particles[i].push(particle);
      world.addBody(particle);
    }
  }
//パーティクルがdistの距離を保つように制約するための関数  
  function connect(i1, j1, i2, j2) {
    world.addConstraint(new CANNON.DistanceConstraint(
      particles[i1][j1],
      particles[i2][j2],
      dist,
    ));
  }
//各パーティクルにCANNON.DistanceConstraint（制約）を設定  
  for (let i = 0; i <= col; i++) {
    for (let j = 0; j <= row; j++) {
      if (i < col) connect(i, j, i + 1, j);
      if (j < row) connect(i, j, i, j + 1);
    }
  }
  
  const clothGeometry = new THREE.PlaneGeometry(1, 1, col, row);
  const clothMaterial = new THREE.MeshBasicMaterial({
    color: '#ff0000',
    side: THREE.DoubleSide,
  //  wireframe: true,
  });  
  const clothMesh = new THREE.Mesh(clothGeometry, clothMaterial);
  scene.add(clothMesh);

 // PlaneGeometryの頂点の位置を更新する（パーティクルの位置をPlaneGeometryの頂点にマッピング）関数 
  function updateParticules() {
    for (let i = 0; i <= col; i++) {
      for (let j = 0; j <= row; j++) {
   //2Dのパーティクル配列から1DのPlaneGeometryの頂点へのマッピングが必要
   //そのために2Dのiとjの位置を1Dのインデックスに変換
        const index = j * (col + 1) + i;
        const positionAttribute = clothGeometry.attributes.position;
   //パーティクルの位置の位置を取得
   //（row-j）でy軸方向の順序を反転させて、PlaneGeometryの頂点の位置にあわせる
        const position = particles[i][row - j].position;
        positionAttribute.setXYZ(index, position.x, position.y, position.z);
        positionAttribute.needsUpdate = true;
      }
    }
  }

// 風の力をシミュレートする関数
function applyWindForce() {
  for (let i = 0; i <= col; i++) {
    for (let j = 0; j <= row; j++) {
      const force = new CANNON.Vec3(
        (Math.random() - 0.5) * 2,
        0,
        (Math.random() - 0.5) * 2 
      );
      particles[i][j].applyForce(force, particles[i][j].position);
    }
  }
}

  function animate() {
    applyWindForce();
    updateParticules();
    world.step(1 / 60);
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }  
  animate2();
</script>