Three.js Composition Patterns

Integrate Helios with Three.js to drive 3D animations frame-by-frame. This ensures deterministic rendering and perfect synchronization.

Quick Start (React Three Fiber)

The key is to disable the R3F internal loop (frameloop="never") and drive the scene update manually via the advance() method in a Helios subscription.

1. Setup Component

import React, { useState, useEffect } from 'react';
import { Canvas } from '@react-three/fiber';
import { Helios } from '@helios-project/core';

// Singleton Helios instance
const helios = new Helios({
  fps: 30,
  duration: 10,