# Failed to load ktx2 model

**URL:** <https://discourse.threejs.org/t/failed-to-load-ktx2-model/70981>\
**Category:** Questions\
**Tags:** ktx2, react-three-fiber\
**Created:** [September 21, 2024, 6:53pm UTC](https://discourse.threejs.org/t/failed-to-load-ktx2-model/70981 "2024-09-21T18:53:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bohdan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bohdan/32/51973_2.png) [@Bohdan](https://discourse.threejs.org/u/Bohdan)\
**Post date:** [September 21, 2024, 6:53pm UTC](https://discourse.threejs.org/t/failed-to-load-ktx2-model/70981/1 "2024-09-21T18:53:04Z")

</div>

Hey there

I am currently developing a 3D website for my portfolio and i noticed that my 3d model loads slow.  
So i started to look for the solution and i’ve bumped into Wawa Sensei’s video about ktx2.  
I’ve transformed my glb to ktx2 and tried to do it as shown on video.  
[Link to Wawa Sensei’s video](https://www.youtube.com/watch?v=Wt3iEenj_Xw&t=118s)

Here is the full code. But, originally, transcoder path that is being set by function SetTranscoderPath() had a link “[https://cdn.jsdelivr.net/gh/pmndrs/drei-assets/basis/](https://cdn.jsdelivr.net/gh/pmndrs/drei-assets/basis/)” but  
if you paste it and look for it then it leads you to message: Package size exceeded the configured limit of 50 MB. Try [drei-assets/basis at master · pmndrs/drei-assets · GitHub](https://github.com/pmndrs/drei-assets/tree/master/basis/) instead.

So i used this link instead

```import
import { useScroll, useGLTF, GradientTexture, Loader } from "@react-three/drei";
import { useFrame, useThree } from "@react-three/fiber";
import { folder, useControls } from "leva";
import gsap from "gsap";
import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader";

export function Axe(props) {
 const gl = useThree((state) => state.gl);
 const { nodes, materials } = useGLTF(
  "/transformed/free_axe_sylvaxe_ktx.glb",
   undefined,
   undefined,
   (loader) => {
     const ktx2loader = new KTX2Loader();
     ktx2loader.setTranscoderPath(
       "https://github.com/pmndrs/drei-assets/tree/master/basis/"
     );
     ktx2loader.detectSupport(gl);
     loader.setKTX2Loader = ktx2loader;
     loader.setKTX2Loader(ktx2loader);
   }
 );

  const axe = useRef();
  const axeScale = useRef();
  const scroll = useScroll();
  const tl = useRef();
  useFrame((state, delta) => {
    tl.current.seek(scroll.offset * tl.current.duration());
  });
  useLayoutEffect(() => {
    tl.current = gsap.timeline({
      defaults: { duration: 0.3, ease: "power1.inOut" },
    });

    tl.current
      .to(axe.current.position, { x: 4 }, 0.1)
      .to(axe.current.position, { y: 0 }, 0.1)
      .to(axe.current.position, { z: 1.5 }, 0.1)
      .to(axe.current.rotation, { x: -0.2 }, 0.1)
      .to(axe.current.rotation, { y: -4.3 }, 0.1)
      .to(axe.current.rotation, { z: 0 }, 0.1)
      .to(axeScale.current.scale, { x: 0.0115, y: 0.0115, z: 0.0115 }, 0.1)
      .to(axe.current.position, { x: -4.7 }, 0.4)
      .to(axe.current.position, { y: -0.16 }, 0.4)
      .to(axe.current.position, { z: 1.44 }, 0.4)
      .to(axe.current.rotation, { x: -0.2 }, 0.4)
      .to(axe.current.rotation, { y: -1.97 }, 0.4)
      .to(axe.current.rotation, { z: 0 }, 0.4)
      .to(axeScale.current.scale, { x: 0.01, y: 0.01, z: 0.01 }, 0.4)

      .to(axe.current.position, { x: -0.13 }, 0.7)
      .to(axe.current.position, { y: -1.09 }, 0.7)
      .to(axe.current.position, { z: 0.5 }, 0.7)
      .to(axe.current.rotation, { x: -0.57 }, 0.7)
      .to(axe.current.rotation, { y: -3.11 }, 0.7)
      .to(axe.current.rotation, { z: -1.62 }, 0.7)
      .to(axeScale.current.scale, { x: 0.01, y: 0.01, z: 0.01 }, 0.7);
  }, []);
  return (
    <group
      {...props}
      dispose={null}
      position={[-1.23, 0, 0]}
      rotation={[-0.2, -2.49, 0]}
      ref={axe}
    >
      <group>
        <group rotation={[-Math.PI, 0, 0]} scale={0.01} ref={axeScale}>
          <mesh
            geometry={nodes.Sylvaxe_Sylvaxe_0.geometry}
            material={materials.Sylvaxe}
            rotation={[Math.PI / 2, 0, 0]}
          />
        </group>
      </group>
    </group>
  );
}

useGLTF.preload("/transformed/free_axe_sylvaxe_ktx.glb");

```

But i end up seeing this error in the console:  
_Uncaught Error: Could not load /transformed/free\_axe\_sylvaxe\_ktx.glb: THREE.GLTFLoader: setKTX2Loader must be called before loading KTX2 textures_

And also message:  
_THREE.WebGLRenderer: Context Lost._

P.S. i transformed glb to jsx using gltfjsx  
[Link](https://github.com/pmndrs/gltfjsx)

Does anybody know what to do in this situation?  
Thank you

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [September 21, 2024, 7:39pm UTC](https://discourse.threejs.org/t/failed-to-load-ktx2-model/70981/2 "2024-09-21T19:39:25Z")

</div>

> [@How to load a GLTF that uses KTX2 textures? Getting error: setKTX2Loader must be called before loading KTX2 textures](https://discourse.threejs.org/t/how-to-load-a-gltf-that-uses-ktx2-textures-getting-error-setktx2loader-must-be-called-before-loading-ktx2-textures/48792/2):
>
> setKTX2Loader is a method and not a property – you’ll want to do this: loader.setKTX2Loader(this.ktx2Loader); The [webgl / loaders / gltf / compressed](https://threejs.org/examples/?q=gltf#webgl_loader_gltf_compressed) example is a good reference as well.

---

<div class="post-metadata">

**Author:** ![Bohdan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bohdan/32/51973_2.png) [@Bohdan](https://discourse.threejs.org/u/Bohdan)\
**Post date:** [September 21, 2024, 7:47pm UTC](https://discourse.threejs.org/t/failed-to-load-ktx2-model/70981/3 "2024-09-21T19:47:11Z")

</div>

Already tried it… Didn’t help, same problem.  
Btw, i forgot to delete line(was trying to fix it, didn’t help either):  
_loader.setKTX2Loader = ktx2loader;_

So know main part where i load the model looks like this:

```javascript
const gl = useThree((state) => state.gl);
 const { nodes, materials } = useGLTF(
  "/transformed/free_axe_sylvaxe_ktx.glb",
   undefined,
   undefined,
   (loader) => {
     const ktx2loader = new KTX2Loader();
     ktx2loader.setTranscoderPath(
       "https://github.com/pmndrs/drei-assets/tree/master/basis/"
     );
     ktx2loader.detectSupport(gl);
     loader.setKTX2Loader(this.ktx2loader);
   }
 );

```

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [September 21, 2024, 7:54pm UTC](https://discourse.threejs.org/t/failed-to-load-ktx2-model/70981/4 "2024-09-21T19:54:04Z")

</div>

> [@Bohdan](#):
>
> ```javascript
> const gl = useThree((state) => state.gl);
> const { nodes, materials } = useGLTF(
> "/transformed/free_axe_sylvaxe_ktx.glb",
> undefined,
> undefined,
> (loader) => {
> const ktx2loader = new KTX2Loader();
> ktx2loader.setTranscoderPath(
> "https://github.com/pmndrs/drei-assets/tree/master/basis/"
> );
> ktx2loader.detectSupport(gl);
> loader.setKTX2Loader(this.ktx2loader);
> }
> );
> 
> ```

The post shared may be confusing if you’re not building a class with internal properties and methods, your already declaring `ktx2loader` as a constant within the confines of your primary loader function… Try this…

```javascript
loader.setKTX2Loader(ktx2loader) 

```

Instead of “`this.`”, which seems to be irrelevant in your case…

---

<div class="post-metadata">

**Author:** ![Bohdan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bohdan/32/51973_2.png) [@Bohdan](https://discourse.threejs.org/u/Bohdan)\
**Post date:** [September 21, 2024, 7:58pm UTC](https://discourse.threejs.org/t/failed-to-load-ktx2-model/70981/5 "2024-09-21T19:58:14Z")

</div>

Thank you for trying to help me!  
I forgot to delete “this.” in the code, sorry

```javascript
  const gl = useThree((state) => state.gl);
 const { nodes, materials } = useGLTF(
  "/transformed/free_axe_sylvaxe_ktx.glb",
   undefined,
   undefined,
   (loader) => {
     const ktx2loader = new KTX2Loader();
     ktx2loader.setTranscoderPath(
       "https://github.com/pmndrs/drei-assets/tree/master/basis/"
     );
     ktx2loader.detectSupport(gl);
     loader.setKTX2Loader(ktx2loader);
   }
 );

```

Still the same error

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [September 21, 2024, 8:32pm UTC](https://discourse.threejs.org/t/failed-to-load-ktx2-model/70981/6 "2024-09-21T20:32:34Z")

</div>

OK, that seems like it should work 🤔

Did you already reference the usage…

```javascript
import { useGLTF } from '@react-three/drei'
import { REVISION } from 'three'
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader'
import { useThree } from '@react-three/fiber'

 const { gl } = useThree()

const { scene } = useGLTF('/myScene-transformed.glb', false, false, (loader) => {
    const THREE_PATH = `https://unpkg.com/three@0.${REVISION}.x`
    const ktx2Loader = new KTX2Loader().setTranscoderPath(`${THREE_PATH}/examples/jsm/libs/basis/`)
    loader.setKTX2Loader(ktx2Loader.detectSupport(gl))
})

```

taken from here… [How to use KTX2Loader with useGLTF, and without use useKTX2() which seems to need explicit textures URIs · pmndrs/drei · Discussion #1335 · GitHub](https://github.com/pmndrs/drei/discussions/1335)