Error while using the KTX2Loader and following webgl_materials_envmaps_fasthdr.html

Questions
1

I’m trying to follow the webgl_materials_envmaps_fasthdr.html example but I’m getting an odd error.

first my code:

.
.
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
.
.

const loader = new KTX2Loader().setTranscoderPath('three/examples/jsm/libs/basis/').detectSupport(renderer);

function loadTexture(url) {
  loader.load(url, (texture) => {
    texture.mapping = THREE.CubeUVReflectionMapping;
    scene.environment = texture;
    scene.background = texture;
  });
}
loadTexture("./assets/output.ktx2");

I used toKTX tool to convert the HDR to KTX2 (HDR to PNG to KTX2)

toktx --t2 --encode uastc --clevel 5 --qlevel 64 --assign_oetf linear --input_swizzle rgb1 output.ktx2 input.png

error code:

00fb4d4e-bb92-4792-899e-2b8a80955ca5:7 Uncaught SyntaxError: Unexpected identifier 'html' (at 00fb4d4e-bb92-4792-899e-2b8a80955ca5:7:11)

the file (at 00fb4d4e-bb92-4792-899e-2b8a80955ca5:7:11) is: basis_transcoder.js by looking at the error code.

any help? thanks.

2

For transcoding Basis Universal textures, KTX2Loader needs a static Web Assembly (WASM) binary. Whatever you’re using to resolve the name three to the actual three.js JavaScript files (a bundler like Vite, or Import Maps, etc.) probably isn’t going to set up this WASM file for you. In most cases I would just copy that three/examples/jsm/libs/basis/ folder into your project as static files, and replace the transcoder path with that directory path. If you’re using Vite, for example, the most common place to put static files is in the public/ directory:

If you’re not using a bundler, and are just using a static server and local files, then any directory (not in node_modules) should be fine.