How to correctly use `--draco` option?

[ChrisCrossCrash]

I'm trying to use the -d (Draco binary path) option so that I can host the Draco files myself.

Here's the command I ran and its output:

$ npx gltfjsx r-place.glb -d
group removed (empty)
jsxBracketSameLine is deprecated.
 Done:  R-place.js

Here is the generated file:

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model({ ...props }) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/r-place.glb')
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh geometry={nodes.rPlaceGrid.geometry} material={materials.ColorMap} scale={10} />
    </group>
  )
}

useGLTF.preload('/r-place.glb')

As you can see here, I have the Draco files in my public folder:

However, the Draco files are still being downloaded from www.gstatic.com:

I tried resetting my development server but the problem persists. Shouldn't the generated file try to download from my site's public/ folder? Maybe I'm misunderstanding how this is supposed to work.

[drcmda]

useGLTF('/r-place.glb', "/path/to/draco") gltfjsx did this once but probably fell out unintentionally. would you want to make a pr?

[drcmda]

or wait, i think the syntax is off, this should probably be: npx gltfjsx r-place.glb -d="/path/to/draco"

[ChrisCrossCrash]

Thanks for the help. I tried the command with the path to the Draco files as / (url path), /public (path relative to project root), /home/ck/projects/depth-section/public (absolute folder path path), and . (relative folder path). I also tried with the file names like /draco_decoder.js and /draco_decoder.wasm, but none of these options seem to change the behavior of the component.

I assume that the correct way would be to use the URL path to the directory where the Draco files live on the server.

ck@Laptop-CK:~/projects/depth-section/public 
$ npx gltfjsx r-place.glb -d="/" --debug
 Group Scene pos: [ 0, 0, 0 ] scale: [ 1, 1, 1 ] rot: [ 0, 0, 0 ] mat: 
   Mesh rPlaceGrid pos: [ 0, 0, 0 ] scale: [ 10, 10, 10 ] rot: [ 0, 0, 0 ] mat: ColorMap-415AEA66
group removed (empty)
jsxBracketSameLine is deprecated.
 Done:  R-place.js

Which creates this output:

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model({ ...props }) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/r-place.glb', '/')
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh geometry={nodes.rPlaceGrid.geometry} material={materials.ColorMap} scale={10} />
    </group>
  )
}

useGLTF.preload('/r-place.glb')

The useGLTF('/r-place.glb', '/') is different, but the behavior is the same where it downloads from www.gstatic.com without attempting to download the files from the development server. Maybe this behavior did fall out unintentionally?

I'd try to make a PR to fix this but I'm in the process of moving in a week. I could do it but it would take some time for me to get started. However, I could make a PR for the documentation if it's needed.

[drcmda]

could you remove the preload? usegltf should just search in public with "/"

[ChrisCrossCrash]

Commenting out the useGLTF.preload('/r-place.glb') did the trick!

Changing that line to useGLTF.preload('/r-place.glb', '/') also seems to work. Perhaps the --draco option should also pass its argument to useGLTF.preload() as well as useGLTF()? I could give it a shot with a PR.