How to import a JS file in kotlin/JS

Question

I am trying to use THREE.js with kotlin/JS. It works great so far, however, I struggle on how to import the gLTFLoader. The documentation says I should do:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

In kotlin

@file:JsModule("three")
@file:JsNonModule

at the beginning of a file works.

This

@file:JsModule("three/examples/jsm/loaders/GLTFLoader")
@file:JsNonModule
package mypackage

import org.w3c.xhr.XMLHttpRequest

external class GLTFLoader() {
    fun load(url: String, onLoad: (GLTF) -> Unit, onProgress: (XMLHttpRequest) -> Unit = definedExternally, onError: (dynamic) -> Unit = definedExternally)
}

external class GLTF {
    val scene: Group
}

does not work. And

@file:JsModule("@three/examples/jsm/loaders/GLTFLoader")

does not work either. In both cases, I get

Module not found: Error: Can't resolve '@three/examples/jsm/loaders/GLTFLoader' in '/my_project_dir/build/js/packages/z-index/kotlin'

The required file is in /my_project_dir/build/js/node_modules/three/examples/jsm/loaders/GLTFLoader.js The main file for Three.js, which apparently can be found, is in /my_project_dir/build/js/node_modules/three/src/Three.js.

How do I do the required import?

Answer 1

You should use require for statements like those in three.kt, define your definitions

@file:JsModule("three")
@file:JsNonModule
package mypackage

import org.w3c.xhr.XMLHttpRequest

external interface ThreeGLTFLoader() {
    fun load(url: String, onLoad: (GLTF) -> Unit, onProgress: (XMLHttpRequest) -> Unit = definedExternally, onError: (dynamic) -> Unit = definedExternally)
}

external interface GLTF {
    val scene: Group
}

then in three.dsl.kt define

val GLTFLoader : ThreeGLTFLoader = require("three/examples/jsm/loaders/GLTFLoader")

now you can use GTFLLoader