Ktx2 loader: Unexpected identifier 'html'

Questions
1

Hello,
I’m trying to load a ktx2 texture, but I get this error:

Uncaught SyntaxError: Unexpected identifier 'html' (at be60c27b-a185-4e22-a763-bad0f7c717e0:6:11)

The error points to the html tag:

/* constants */
let _EngineFormat = {"RGBAFormat":1023,"RGBA_ASTC_4x4_Format":37808,"RGBA_BPTC_Format":36492,"RGBA_ETC2_EAC_Format":37496,"RGBA_PVRTC_4BPPV1_Format":35842,"RGBA_S3TC_DXT5_Format":33779,"RGB_ETC1_Format":36196,"RGB_ETC2_Format":37492,"RGB_PVRTC_4BPPV1_Format":35840,"RGB_S3TC_DXT1_Format":33776}
let _TranscoderFormat = {"ETC1":0,"ETC2":1,"BC1":2,"BC3":3,"BC4":4,"BC5":5,"BC7_M6_OPAQUE_ONLY":6,"BC7_M5":7,"PVRTC1_4_RGB":8,"PVRTC1_4_RGBA":9,"ASTC_4x4":10,"ATC_RGB":11,"ATC_RGBA_INTERPOLATED_ALPHA":12,"RGBA32":13,"RGB565":14,"BGR565":15,"RGBA4444":16}
let _BasisFormat = {"ETC1S":0,"UASTC_4x4":1}
/* basis_transcoder.js */
<!DOCTYPE html>
<html lang="en-US">
   <head>

I’m using webpack and I’m loading the texture as follows:

import {KTX2Loader} from 'three/addons/loaders/KTX2Loader.js';
import test from '../../../../assets/models/test.ktx2';

this.ktx2Loader = new KTX2Loader();
this.ktx2Loader.setTranscoderPath('../utils/decoders/basis');
this.ktx2Loader.detectSupport( this.renderer );

const texture = await this.ktx2Loader.loadAsync(test);

three r150

Thank you

2

Most likely the JavaScript code and the HTML code are mixed in a way that the browser does not understand. The traditional way of mixing them is to put JavaScript code inside HTML <script> tag somewhere in the HTML document. Example:

<!DOCTYPE html>
<html lang="en-US">
   <head>
     <script>
       /* constants */
       let _EngineFormat = {"RGBAFormat":1023,...};
       let _TranscoderFormat = {"ETC1":0,"ETC2":1,"BC1":2,...};
       let _BasisFormat = {"ETC1S":0,"UASTC_4x4":1};
       /* basis_transcoder.js */
       ...
    </script>
  </head>
  <body>
     ...
  </body>
</html>
3

/cc

4

For anyone else stumbling over this. I was encountering the same error while including the transcoder files (.js and .wasm) myself. Make sure you set your path to point to the containing folder, not to one of the files directly (i.e. “./transcoder/” not “./transcoder/basis_transcoder.js”) like me :person_facepalming: