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)?

[tenkkov]

Fix it please :)

[github-actions]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!

[github-actions]

We’re closing this issue to keep our project manageable and make room for other active work, but we truly appreciate your effort and contribution.

If you’d like to continue working on this, please feel free to re-open it or reach out on Discord — our community is always ready to support you. Thanks again for helping us stay organized and for understanding our approach!