pmndrs / react-three-fiber

🇨🇭 A React renderer for Three.js
https://docs.pmnd.rs/react-three-fiber
MIT License
27.62k stars 1.6k forks source link

ReferenceError: Property "Worker" doesn't exist #3348

Closed thechaudharysab closed 2 months ago

thechaudharysab commented 2 months ago

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?

thechaudharysab commented 2 months ago

Moved here: https://github.com/pmndrs/react-three-fiber/discussions/3349