ReferenceError: Property "Worker" doesn't exist

[thechaudharysab]

I have a .glb that I'm trying to load in my react-native app, but I'm getting ReferenceError: Property "Worker" doesn't exist. The file I understand is DRACO compressed and it was exported from blender.

import React, { useRef } from 'react';
import { useGLTF, useAnimations } from '@react-three/drei/native';
import { DRACOLoader } from 'three-stdlib';

export default function Model(props) {
  const group = useRef();
  const { position } = props;

  const { nodes, materials, animations } = useGLTF(
    require('./Model_Char.glb'),
    true, // Enable DRACO support
    loader => {
      const dracoLoader = new DRACOLoader();
      dracoLoader.setDecoderPath(
        'https://www.gstatic.com/draco/versioned/decoders/1.5.7/',
      );
      dracoLoader.setWorkerLimit(0); // Disable Web Workers for React Native
      loader.setDRACOLoader(dracoLoader);
    },
  );

  const { actions } = useAnimations(animations, group);

  return (
    <group ref={group} {...props} dispose={null}>
      <group name="Scene">
        <group name="Armature" rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
          <skinnedMesh...

And I'm loading it as:

const renderFemaleModel = () => {
  return (
    <Canvas>
      <directionalLight position={[5, 10, 15]} intensity={1} castShadow />
      <directionalLight position={[-10, 10, 15]} intensity={1} />
      <directionalLight position={[10, 10, 15]} intensity={1} />
      <Suspense fallback={null}>
        <Model />
      </Suspense>
      <OrbitControls enableZoom={false} />
    </Canvas>
  );
};

export default function App() {
  return <View style={{ flex: 1 }}>{renderFemaleModel()}</View>;
}

How do I load my Draco compressed glb successfully?

[CodyJasonBennett]

Even without workers, DRACO relies on a WASM decoder, which needs JIT to work. JIT is forbidden in app stores, and so interfaces like WASM are not implemented in react-native. If you want to implement something yourself via JSI, I would recommend https://github.com/zeux/meshoptimizer instead since it retains GPU optimizations, which are critical for mobile; DRACO perturbs this as part of its file size reduction. It's possible to implement this yourself in JS also as per https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Vendor/EXT_meshopt_compression/README.md.

[liho00]

@thechaudharysab did you found the solution? Could you share it?

[thechaudharysab]

I was doing a POC in which I had to use three in a react-native project, and tbh I didn't do anything after that, so I can't recall what this issue was exactly, but I did write a React-Native and Three.js tutorial back then: https://dev.to/thechaudhrysab/react-native-and-threejs-25p4 may be this has the solution you're looking for.

[liho00]

@thechaudharysab
I found an alternative solution, which is use webview to render it, create a next js project with react three fiber deploy it, and load in the react native app webview.