RenaudRohlinger

import React, { FC, useEffect } from 'react';

type State = {
  progress: number;
  isLoading: boolean;
}

const useStore = create<State>((set, get) => ({
  isLoading: true,
  progress: 0,

RenaudRohlinger

import React, { useEffect } from 'react'
import gsap from 'gsap'
import { useFrame } from '@react-three/fiber'

// sync gsap raf to r3f raf
gsap.ticker.remove(gsap.updateRoot)

export const GsapTicker = () => {
  const pg = React.useRef(0)
  gsap.ticker.remove(gsap.updateRoot)

RenaudRohlinger

import { useFrame, useThree } from '@react-three/fiber'
import { useEffect, useMemo } from 'react'
import * as THREE from 'three'

function getFullscreenTriangle() {
  const geometry = new THREE.BufferGeometry()
  const vertices = new Float32Array([-1, -1, 3, -1, -1, 3])
  const uvs = new Float32Array([0, 0, 2, 0, 0, 2])

  geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 2))