Material Loading Issue with useGLTF and primitive Component in React Native on Android Devices

[eric183]

Material Loading Issue with useGLTF and primitive Component in React Native on Android Devices

[CodyJasonBennett]

Can you share a model and/or code to reproduce this?

[eric183]

Can you share a model and/or code to reproduce this?
Thank you for your replying.
Yes, of course, I will add more information for this issue.

Here is the GLB file I uploaded with Google drive link below.

https://drive.google.com/file/d/1dnuHwZMStMKexlDPrnheTN8VjfZt0Wjq/view?usp=sharing

And now please let me paste the code:

import { useGLTF } from "@react-three/drei/native";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

import { useLoader, useThree } from "@react-three/fiber/native";
import {
  forwardRef,
  useRef,
  useState,
  useLayoutEffect,
  useEffect,
} from "react";

import gtlfFile from "./B.glb";

import THREE from "three";

const Girl = forwardRef((props, ref) => {

  const { camera } = useThree();
  const animationGroup = useRef(null!);

  const { scene, nodes } = useGLTF(
    gtlfFile,
  ) as unknown as {
    nodes: THREE.BufferGeometry[];
    scene: {
      geometries: THREE.BufferGeometry[];
      materials: THREE.Material;
    };
  };
 
  return (
    <>
  
      {Object.entries(nodes).map(([key, value]) => {
        return (
          <mesh
            key={key}
            castShadow
            receiveShadow
            geometry={value.geometry}
            material={value.material}
          >
        
          </mesh>
        );
      })}
  
    </>
  );
});

Girl.displayName = "Girl";

export default Girl;

[eric183]

Can you share a model and/or code to reproduce this?
Thank you for your replying.
Yes, of course, I will add more information for this issue.

Here is the GLB file I uploaded with Google drive link below.

https://drive.google.com/file/d/1dnuHwZMStMKexlDPrnheTN8VjfZt0Wjq/view?usp=sharing

And now please let me paste the code:

import { useGLTF } from "@react-three/drei/native";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

import { useLoader, useThree } from "@react-three/fiber/native";
import {
  forwardRef,
  useRef,
  useState,
  useLayoutEffect,
  useEffect,
} from "react";

import gtlfFile from "./B.glb";

import THREE from "three";

const Girl = forwardRef((props, ref) => {

  const { camera } = useThree();
  const animationGroup = useRef(null!);

  const { scene, nodes } = useGLTF(
    gtlfFile,
  ) as unknown as {
    nodes: THREE.BufferGeometry[];
    scene: {
      geometries: THREE.BufferGeometry[];
      materials: THREE.Material;
    };
  };
 
  return (
    <>
  
      {Object.entries(nodes).map(([key, value]) => {
        return (
          <mesh
            key={key}
            castShadow
            receiveShadow
            geometry={value.geometry}
            material={value.material}
          >
        
          </mesh>
        );
      })}
  
    </>
  );
});

Girl.displayName = "Girl";

export default Girl;

Sorry for I forgot to mention, I have made some change here:

   <primitive object={scene} {...props} />

to:

{Object.entries(nodes).map(([key, value]) => {
        return (
          <mesh
            key={key}
            castShadow
            receiveShadow
            geometry={value.geometry}
            material={value.material}
          >
        
          </mesh>
        );
      })}

because I need to debug the source code, and try to find what happend

[eric183]

I debug the source code, I guess there' s something wrong with "webGL2" boolean logic:

if no "webGL2" invoker went to MathUtil.sRGBToLinear, then went here.

https://github.com/mrdoob/three.js/blob/1b8412c700316e3ed0d3b5f5ab827287e3351bad/build/three.js#L1801C32-L1801C32

But the "image.data" is a {} object, if call image.data.slice(0)... BOOM~

[eric183]

Simply put, if you follow the official documentation and load any 3D model with texture maps, you will reproduce the issue I am experiencing: https://docs.pmnd.rs/react-three-fiber/getting-started/installation#react-native

[eric183]

Can someone help me, please?

the log ......that's wild

[eric183]

I updated the source code , the error disappeared, but the model turned to dark?