Best way to handle multiple gltfs / refs for 3 different gltfs in react three fiber?

Questions
, , , ,
1

At the moment i have 3 different gltfs they all share the same shader material in separate gltfjsx files being imported as components but im having trouble loading texture properly to one of the gltfs - (it does load sometimes but i notice only if one of them isn’t using it)… It was fine for me before in normal three because it was all in one function using a promise loader sharing the same shader material and uniforms but not now which tells me that how i’m doing it must be quite taxing on render…

this x3


import React, { useRef, useMemo, forwardRef } from "react";
import { useGLTF, useTexture, shaderMaterial, Html } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import { extend } from "@react-three/fiber";
import * as THREE from "three";

import coral from "../../../img/Coral_002_SD/Coraln.jpg";
import vertexshader from "../glsl/handvs";
import fragmentshader from "../glsl/handfs";

const TopHand = forwardRef(function TopHand(props, ref) {
  const { nodes, materials } = useGLTF("./modelsGLTF/handTOPb/handTOPb.gltf");

  const uniforms = useMemo(
    () => ({
      uTime: { value: 0 },
      coral: { type: "t", value: new THREE.TextureLoader().load(coral) },
      iResolution: { value: new THREE.Vector3() },
    }),
    [coral]
  );

  useFrame(({ clock, mouse }) => {
    ref.current.material.uniforms.uTime = clock.getElapsedTime();
  });

  return (
    <group
      {...props}
      dispose={null}
      position={[-7, -22, 8]}
      rotation={[4, 0, 2]}
    >
      <mesh
        scale={[1, 1, 1]}
        geometry={nodes.hand.geometry}
        material={nodes.hand.material}
        rotation={[Math.PI / 2, 0, 0]}
        ref={ref}
      >
        <shaderMaterial
          fragmentShader={fragmentshader}
          vertexShader={vertexshader}
          uniforms={uniforms}
          transparent={true}
        />
      </mesh>
    </group>
  );
});

useGLTF.preload("./modelsGLTF/handTOPb/handTOPb.gltf");

export default TopHand;

and the main file

import React, { Suspense, useRef, useMemo, forwardRef } from "react";

import TopHand from "./threeComp/HandTOPb";
import Hand2 from "./threeComp/2hand";
import LpHand from "./threeComp/lphand";


const Hands = () => {
  const matRef = useRef();

  return (
    <Suspense>
      <Hand2
        ref={matRef}
      />
      <TopHand
        ref={matRef}

      />
      <LpHand
        ref={matRef}
      />
    </Suspense>
  );
};

export default Hands;

So i was looking for the most optimal way to handle multiple gltfs in react fiber. Should i put them all in the same file together as seperate functions (or some variation of that)so that i only have to declare uniforms once ? Or is there something that i’m missing the way i’m doing it right now ?

2

React three fiber has useTexture hook for loading texture, you should use that

3

yh i’ve tried that tbf there wasn’t much difference and my texture still didn’t load properly

4

just an update i’ve somewhat fixed it by getting rid of the forwardRef feature but now the performance of my site is significantly slower so i’m still looking for suggestions on optimising it

5

i think it might be more of a problem of handling multiple refs for multiple gltfjsx’s if its not my file structure…

6

Can you please provide codesandbox with issue? Performance issue could be because of multiple factors, so it’ll be hard to comment for anyone.

7

Just another update to say i’ve somewhat fixed the performance it by putting all the gltfjsx’s in one file under one component function which allowed me to now see the shader textures on all models also reducing the number of refs and for got rid of the shadow maps which i’d left enabled by accident when i was testing that feature out and thats increased performance drastically as it was very expensive on my scene