useKTX2() seems not to work

[stefano-ciotola]

Environment:

• three version: 0.161
• @react-three/fiber version: 8.15.19
• @react-three/drei version: 9.99.5
• node version: 20.11.0
• npm (or yarn) version: 10.2.4

Problem description:

When attempting to load a KTX2 texture using useKTX2('my_texture_path'), the console throws a ReferenceError: _KTX2Loader is not defined, preventing the successful loading of KTX2 textures.

Full error log:

ReferenceError: _KTX2Loader is not defined
handleError@http://localhost:3000/static/js/bundle.js:85964:58
./node_modules/webpack-dev-server/client/overlay.js/createOverlay/<@http://localhost:3000/static/js/bundle.js:85983:18
EventListener.handleEvent*listenToRuntimeError@http://localhost:3000/static/js/bundle.js:86156:10
createOverlay@http://localhost:3000/static/js/bundle.js:85976:84
./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=none&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true@http://localhost:3000/static/js/bundle.js:84689:105
options.factory@http://localhost:3000/static/js/bundle.js:163923:31
__webpack_require__@http://localhost:3000/static/js/bundle.js:163352:32
@http://localhost:3000/static/js/bundle.js:164567:30
@http://localhost:3000/static/js/bundle.js:164571:12

The example provided in the documentation does not seem to work either (https://drei.pmnd.rs/?path=/docs/loaders-ktx2--docs).

I have followed the standard setup and installation procedures for three, @react-three/fiber, and @react-three/drei as recommended in the docs.

[MathisEngels]

Having the same issue here, same specs.

[vasabyy98]

This needs more attention.

[freddywhd]

same issue here.

[ektogamat]

Same issue here :).

Meanwhile, I've found a way to make it work. Just change the KTX2Loader to use threejs default instead of three-stdib. This is the code that worked for me:

import React, { useEffect, useRef } from 'react'
import { useGLTF } from '@react-three/drei'
import { extend, useThree } from '@react-three/fiber'
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader'

extend({ KTX2Loader })

export default function House(props) {
  const { nodes, materials } = useGLTF('/HouseV3_Final_baked.glb')

  const meshRef = useRef()
  const { gl } = useThree()

  useEffect(() => {
    const loader = new KTX2Loader()
      .setTranscoderPath(
        'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets/basis/'
      )
      .detectSupport(gl)

    loader.load('house_base.ktx2', (texture) => {
      meshRef.current.material.map = texture
      meshRef.current.material.needsUpdate = true
    })

    return () => loader.dispose()
  }, [gl])

  return (
    <group {...props} dispose={null}>
      <mesh
        ref={meshRef}
        castShadow
        receiveShadow
        geometry={nodes.house_base_Baked.geometry}
        position={[0, 5.07, 0]}
        scale={0.01}
      >
        <meshStandardMaterial />
      </mesh>
    </group>
  )
}

useGLTF.preload('/HouseV3_Final_baked.glb')

It pays all the effort. I got a huge memory optimization. From 20MB VRAM usage for each mesh to 2.2 MB VRAM! It is fantastic! 🫶🏻

[sector32]

Same issue here. Did anybody find a solution that works globally (also for useGLTF)?

[gubatenkov]

Fix it please :)