three

name	three
description	Three.js adapter patterns for deterministic HyperFrames compositions. Use only when a HyperFrames scene needs a Three.js/WebGL canvas, hf-seek-driven rendering, AnimationMixer seeking, camera or shader motion derived from composition time, or pinned renderer settings for reproducible frames. Use threejs-mobile-webgl instead for desktop-versus-iOS texture and control failures.

Three.js for HyperFrames

HyperFrames supports Three.js through its three runtime adapter. The adapter does not own your scene. It publishes HyperFrames time and dispatches a seek event so your composition can render the exact frame.

Contract

• Create the scene, camera, renderer, materials, and assets synchronously when possible.
• Render from HyperFrames time, not wall-clock time.
• Listen for the hf-seek event and render exactly that time.
• Load models, textures, and HDRIs before render-critical seeking. Do not fetch them at seek time.
• Avoid requestAnimationFrame or renderer.setAnimationLoop as the source of truth for render-critical motion.

The adapter sets window.__hfThreeTime and dispatches new CustomEvent("hf-seek", { detail: { time } }) on each seek.

Basic Pattern

<canvas id="three-layer"></canvas>
<script type="module">
  import * as THREE  ;

   canvas = .();
   renderer =  .({ canvas, : , :  });
  
  renderer.(, , );
  renderer.();

   scene =  .();
   camera =  .(,  / , , );
  camera..(, , );

   mesh =  .(
     .(, ),
     .({ : , :  }),
  );
  scene.(mesh);
  scene.( .(, , ));

   () {
    mesh.. = time * ;
    mesh.. = .(time * ) * ;
    renderer.(scene, camera);
  }

  .(,  {
    (event..);
  });

  (. || );