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))

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 React, { FC, useEffect } from 'react';

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

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

RenaudRohlinger

const getMUIDIndex = (muid: string) => muid === 'muid'

el.material.defines = Object.assign(el.material.defines || {}, {
  muid: el.material.id
})
      
gl.info.programs?.forEach(program => {
  const cacheKeySplited = program.cacheKey.split(',')
  console.log(cacheKeySplited[cacheKeySplited.findIndex(getMUIDIndex) + 1]) // will get the material id in the program
});

RenaudRohlinger

function setInstancedMeshPositions(mesh, section) {
  for ( var i = 0; i < mesh.count; i ++ ) {
    var xStaticPosition = -sectionWidth * (i - 1);
		var xSectionPosition = sectionWidth * section;
		var x = xStaticPosition + xSectionPosition;
		dummy.position.set(x, 0, 0);
		dummy.updateMatrix();
    mesh.setMatrixAt( i, dummy.matrix );
  }
  mesh.instanceMatrix.needsUpdate = true;

RenaudRohlinger

function setInstancedMeshPositions(mesh, section) {
  for ( var i = 0; i < mesh.count; i ++ ) {
    var xStaticPosition = -sectionWidth * (i - 1);
		var xSectionPosition = sectionWidth * section;
		var x = xStaticPosition + xSectionPosition;
		dummy.position.set(x, 0, 0);
		dummy.updateMatrix();
    mesh.setMatrixAt( i, dummy.matrix );
  }
  mesh.instanceMatrix.needsUpdate = true;

RenaudRohlinger

function setInstancedMeshPositions(mesh, section) {
  for ( var i = 0; i < mesh.count; i ++ ) {
    var xStaticPosition = -sectionWidth * (i - 1);
		var xSectionPosition = sectionWidth * section;
		var x = xStaticPosition + xSectionPosition;
		dummy.position.set(x, 0, 0);
		dummy.updateMatrix();
    mesh.setMatrixAt( i, dummy.matrix );
  }
  mesh.instanceMatrix.needsUpdate = true;

RenaudRohlinger

function loopFunction() {
  var distance = Math.round(camera.position.x / sectionWidth)
  if (distance !== this.loopSectionPosition) {
    loopSectionPosition = distance
    setInstancedMeshPositions(mesh, loopSectionPosition)
  }
}

function render() {
  // move the camera

RenaudRohlinger

var mesh = null;
var dummy = new THREE.Object3D();
var sectionWidth = 200;

function addInstancedMesh() {
  // An InstancedMesh of 4 cubes
  mesh = new THREE.InstancedMesh(new THREE.BoxBufferGeometry(50,50,50), new THREE.MeshNormalMaterial(), 4);
  scene.add(mesh);
  setInstancedMeshPositions(mesh);
}

RenaudRohlinger

function render() {
  renderer.render( scene, camera );
}

function animate() {
  // render the 3D scene
  render();
  requestAnimationFrame( animate );
}