three

HyperFrames 向け Three.js

HyperFrames は three ランタイムアダプターを通じて Three.js をサポートしています。アダプターはシーンを管理しません。HyperFrames の時間を公開し、シークイベントをディスパッチすることで、コンポジションが正確なフレームをレンダリングできるようにします。

コントラクト

• 可能な場合は、シーン、カメラ、レンダラー、マテリアル、アセットを同期的に作成します。
• 壁時計の時間ではなく、HyperFrames の時間に基づいてレンダリングします。
• hf-seek イベントをリッスンし、その時間を正確にレンダリングします。
• レンダリングに不可欠なシークを行う前に、モデル、テクスチャ、HDRI を読み込みます。シーク時に取得しないでください。
• レンダリングに不可欠なモーションの基準として、requestAnimationFrame や renderer.setAnimationLoop を使用しないでください。

アダプターはシークのたびに window.__hfThreeTime を設定し、new CustomEvent("hf-seek", { detail: { time } }) をディスパッチします。

基本パターン

<canvas id="three-layer"></canvas>
<script type="module">
  import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";

  const canvas = document.getElementById("three-layer");
  const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
  // Match these to your composition's frame size.
  renderer.setSize(1920, 1080, false);
  renderer.setPixelRatio(1);

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(35, 1920 / 1080, 0.1, 100);
  camera.position.set(0, 0, 6);

  const mesh = new THREE.Mesh(
    new THREE.IcosahedronGeometry(1.4, 4),
    new THREE.MeshStandardMaterial({ color: 0x64d2ff, roughness: 0.38 }),
  );
  scene.add(mesh);
  scene.add(new THREE.HemisphereLight(0xffffff, 0x223344, 2));

  function renderAt(time) {
    mesh.rotation.y = time * 0.7;
    mesh.rotation.x = Math.sin(time * 0.6) * 0.16;
    renderer.render(scene, camera);
  }

  window.addEventListener("hf-seek", (event) => {
    renderAt(event.detail.time);
  });

  renderAt(window.__hfThreeTime || 0);
</script>

#three-layer {
  width: 100%;
  height: 100%;
  display: block;
}

AnimationMixer パターン

GLTF または作成したクリップのアニメーションでは、ミキサーを直接シークします。

function renderAt(time) {
  mixer.setTime(time);
  renderer.render(scene, camera);
}

複数のミキサーがある場合は、すべてを同じ time からシークします。

適した用途

• 決定論的な 3D オブジェクト、製品の回転、シード値を指定したパーティクル、シェーダープレート。
• time から導出するカメラの動き。
• アセットがローカルにあり、検証が完了する前に読み込み済みの場合の GLTF アニメーションクリップ。

避けること

• Date.now()、performance.now()、クロックの経過時間を使ってシーンの状態を更新すること。
• 自由実行のアニメーションループ内に、レンダリングに不可欠な処理を残すこと。
• レンダリング時にリモートモデルやテクスチャを読み込むこと。
• デバイスのピクセル比に依存する出力。動画のレンダリングでは、レンダラーのサイズとピクセル比を固定します。
• 時間から状態を再構築できない限り、前のフレームの履歴に依存するポストプロセッシングパスを使うこと。

検証

Three.js のコンポジションを編集した後：

npx hyperframes lint
npx hyperframes validate

クレジットと参考資料

• HyperFrames アダプターのソース：packages/core/src/runtime/adapters/three.ts。
• Three.js WebGLRenderer のドキュメント：https://threejs.org/docs/pages/WebGLRenderer.html
• Three.js AnimationMixer.setTime() のドキュメント：https://threejs.org/docs/pages/AnimationMixer.html