anton-abyzov/vskill

Three.js für HyperFrames

HyperFrames unterstützt Three.js über seinen three-Laufzeitadapter. Der Adapter besitzt Ihre Szene nicht. Er veröffentlicht die HyperFrames-Zeit und löst ein Such-Ereignis aus, damit Ihre Komposition den exakten Frame rendern kann.

Vertrag

• Erstellen Sie die Szene, Kamera, den Renderer, Materialien und Assets synchron, wann immer möglich.
• Rendern Sie basierend auf der HyperFrames-Zeit, nicht auf der Wanduhrzeit.
• Hören Sie auf das hf-seek-Ereignis und rendern Sie genau diese Zeit.
• Laden Sie Modelle, Texturen und HDRIs vor dem renderkritischen Suchen. Holen Sie sie nicht zur Suchzeit ab.
• Vermeiden Sie requestAnimationFrame oder renderer.setAnimationLoop als Quelle der Wahrheit für renderkritische Bewegungen.

Der Adapter setzt window.__hfThreeTime und sendet new CustomEvent("hf-seek", { detail: { time } }) bei jeder Suche.

Basis-Muster

<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 });
  // Passen Sie diese Werte an die Framegröße Ihrer Komposition an.
  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-Muster

Für GLTF- oder erstellte Clip-Animationen suchen Sie den Mixer direkt:

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

Falls mehrere Mixer vorhanden sind, suchen Sie alle mit derselben time.

Gute Anwendungen

• Deterministische 3D-Objekte, Produktrotationen, Teilchen mit gesäten Daten und Shader-Platten.
• Kamerabewegungen, die von time abgeleitet werden.
• GLTF-Animationsclips, wenn Assets lokal sind und vor Abschluss der Validierung geladen wurden.

Vermeiden Sie

• Verwenden von Date.now(), performance.now() oder Takt-Deltas zur Aktualisierung des Szenenzustands.
• Auslagern renderkritischer Arbeit in eine frei laufende Animationsschleife.
• Laden entfernter Modelle oder Texturen zur Renderzeit.
• Von der Gerätepixelverhältnis abhängige Ausgabe. Fixieren Sie Renderergröße und Pixelverhältnis für Videorenderings.
• Nachbearbeitungspässe, die von der Vorgängergeschichte abhängen, es sei denn, Sie können den Zustand aus der Zeit rekonstruieren.

Validierung

Nachdem Sie eine Three.js-Komposition bearbeitet haben:

npx hyperframes lint
npx hyperframes validate

Quellen und Referenzen

• HyperFrames-Adapter-Quellcode: packages/core/src/runtime/adapters/three.ts.
• Three.js WebGLRenderer-Dokumentation: https://threejs.org/docs/pages/WebGLRenderer.html
• Three.js AnimationMixer.setTime()-Dokumentation: https://threejs.org/docs/pages/AnimationMixer.html