anton-abyzov/vskill

Three.js pour HyperFrames

HyperFrames prend en charge Three.js via son adaptateur runtime three. L'adaptateur ne possède pas votre scène. Il publie le temps HyperFrames et déclenche un événement de recherche afin que votre composition puisse restituer l'image exacte.

Contrat

• Créez la scène, la caméra, le rendu, les matériaux et les actifs de manière synchrone lorsque c'est possible.
• Effectuez le rendu à partir du temps HyperFrames, pas de l'horloge murale.
• Écoutez l'événement hf-seek et restituez exactement ce temps.
• Chargez les modèles, textures et HDRIs avant la recherche critique pour le rendu. Ne les récupérez pas au moment de la recherche.
• Évitez requestAnimationFrame ou renderer.setAnimationLoop comme source de vérité pour les mouvements critiques du rendu.

L'adaptateur définit window.__hfThreeTime et déclenche new CustomEvent("hf-seek", { detail: { time } }) à chaque recherche.

Modèle de base

<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 });
  // Adaptez ces valeurs à la taille d'image de votre composition.
  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;
}

Modèle AnimationMixer

Pour GLTF ou une animation clip (clip d'animation) créée, recherchez directement le mixer :

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

Si plusieurs mixers existent, recherchez-les tous à partir du même time.

Bonnes utilisations

• Objets 3D déterministes, rotations de produits, particules avec données initialisées et plaques de shaders.
• Déplacements de caméra dérivés de time.
• Clips d'animation GLTF lorsque les actifs sont locaux et chargés avant la validation finale.

À éviter

• Utiliser Date.now(), performance.now() ou les deltas d'horloge pour mettre à jour l'état de la scène.
• Laisser un travail critique de rendu dans une boucle d'animation libre.
• Charger des modèles ou textures distants au moment du rendu.
• Résultat dépendant du ratio de pixels de l'appareil. Fixez la taille du rendu et le ratio de pixels pour les rendus vidéo.
• Passes de post-traitement qui dépendent de l'historique de l'image précédente, sauf si vous pouvez reconstruire l'état à partir du temps.

Validation

Après avoir modifié une composition Three.js :

npx hyperframes lint
npx hyperframes validate

Crédits et références

• Source de l'adaptateur HyperFrames : packages/core/src/runtime/adapters/three.ts.
• Documentation WebGLRenderer Three.js : https://threejs.org/docs/pages/WebGLRenderer.html
• Documentation AnimationMixer.setTime() Three.js : https://threejs.org/docs/pages/AnimationMixer.html