Three.jsでモーフィングをつかってMeshをスムーズに変形させる 📦

morphTargetInfluences をつかったモーフィングを試してみました。

基本的には、こちらのサンプルをNext.jsに移植した感じですが、抜粋したソースコードはReactを使っていなくとも同じ書き方になる部分です。

ソースコード（抜粋）

con
const cube = new THREE.Mesh(
  (() => {
    const geometry =  new THREE.BoxGeometry(size, size, size, 32, 32, 32);
    const positionAttribute = geometry.attributes.position;
    const spherePositions = [];

    for (let i = 0; i < positionAttribute.count; ++i) {
      const x = positionAttribute.getX(i);
      const y = positionAttribute.getY(i);
      const z = positionAttribute.getZ(i);
      const vertex = (new THREE.Vector3(x, y, z)).normalize().multiplyScalar(size);

      spherePositions.push(vertex.x, vertex.y, vertex.z);
    }

    geometry.morphAttributes.position = [
      // 同じサイズの球の頂点座標をセットする
      new THREE.Float32BufferAttribute(spherePositions, 3)
    ];

    return geometry;
  })(),
  new THREE.MeshNormalMaterial({
    flatShading: true
  })
);

scene.add(cube);

renderer.setAnimationLoop((delta) => {
  // 0 → 立方体、1 → 球となるので 0 ~ 1 を代入する
  cube.morphTargetInfluences[0] = Math.abs(Math.cos(delta / 1000));
  renderer.render(scene, camera);
});