DRACOLoader with GLTFLoader in ReactJs?

Questions
, ,
1

After days of looking out for a solution, I found out that it seems that you must to manually copy files from

node_modules/three/examples/js/libs/draco/gltf

into your public path on server:

cp -r node_modules/three/examples/js/libs/draco/gltf HERE_YOUR_PUBLIC_PATH

You can do this using the cp command native to Ubuntu, which is specifically intended for copying files and directories from one location to another.
cp -a /source/. /destination/

  • Then you have to call

dracoLoader.setDecoderPath('PATH_TO_DRACO_LIBRARY')

The Code:

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";

    const loader = new GLTFLoader();
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath("myDecoder/gltf/");
    loader.setDRACOLoader(dracoLoader);
    //
    //
    loader.load(
      "./models/beanstalk2_green-processed.gltf",
      (d) => {
        this.scene.add(d.scene);
      },
      null,
      (e) => {
        console.error(e);
      }
    );
    // First compress it in Blender
    // Then use the gltf-pipeline to compress it further (at your own risk)
    // Beanstalk-compress.glb is the name of the file i want to compress
    // You have to be in the right directory
    // myProject/public/models$   gltf-pipeline -i Beanstalk-compress.glb -d
    //  result
    // Beanstalk-processed.gltf or glb depending of your file

The Original post:

2

you can also rely on the cdn: https://www.gstatic.com/draco/v1/decoders/ in that case you don’t need to copy assets.

if you’re in react, imo it would always make sense to use r3f, loading a model literally would fit a tweet bc all this stuff is taken care of, including draco and meshopt compression: floating shoe (forked) - CodeSandbox

you also get to do this: https://twitter.com/0xca0a/status/1341811710081044483 which is a big upgrade over how gltfs are handled in plain three.

3

Really nice and thank you very much for the links but unfortunately I am not using react-three-fiber in the moment as I am just starting, but I will definitely try it in the future.

Since I already have a scene and it s working with draco set up, my only problem is that it seems like something happened with the pipeline while trying to make draco work.

I am now getting this error every time I try to compress a “blender compressed file”

with this:

gltf-pipeline -i beanstalk_pinnk.glb -d

pipelineissue
pipelineissue783×297 107 KB

what am I doing wrong?