I can’t for the life of me get this to work, nor are the very few examples i find online working, which drives me towards the conclusion, has this been depcreated?
import * as THREE from "three";
import { renderer, scene, addAnimation } from "./boilerplate";
import { KTX2Loader } from "three/addons/loaders/KTX2Loader.js";
const cube = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial()
);
const loader = new KTX2Loader();
loader.setTranscoderPath("./basis");
loader.detectSupport(renderer);
try {
const texture = loader.load("./sample_uastc_zstd.ktx2");
const box2 = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({ map: texture })
);
box2.rotateX(Math.PI / 4);
box2.material.needsUpdate = true;
scene.add(box2);
} catch (e) {
console.error("wowoow", e);
} finally {
loader.dispose();
}
addAnimation(() => {
cube.rotation.y += 0.01;
});
File format, texture and encoder paths are correct and tested on other resources.
KTX2Loader is not deprecated – it’s actively maintained and widely used.
While loader.load returns a THREE.Texture instance immediately, the HTTP request is asynchronous, and the texture’s internal data is fetched and processed after all of your code in the try/catch/finally block runs. Because loader.dispose() is called synchronously in the finally block, you’ll be disposing the loader before the texture is ready to render, and so probably the loading process never completes.
Instead, you could pass a callback to .load(url, onSuccess, onProgress, onError). Or, perhaps more simply, use loadAsync and await:
try {
const texture = await loader.loadAsync('./sample_uastc_zstd.ktx2');
...
} catch (e) {
...
} finally {
loader.dispose();
}
Aside – if you’re loading multiple textures I would recommend reusing the loader rather than creating and disposing a loader for each image.
2 Likes
Hey, thanks for your response!
I’m aware of asynchronous programming, and I’ve tried this already.
Since THREE.TextureLoader loads textures almost instantly and doesn’t need any await handling, I tried this approach out as well, as the docs doesn’t imply which approach is better. Im aware there is an encoding/decoding process going on here, so there’s more overhead, but still, worth a try.
Is there any sandbox you can refer me to, where this is actually working? I haven’t seen it myself.
thanks!
I forgot a / at the end of my transcoderpath, im the idiot here, sorry for the hassle!