如何在 kotlin/JS 中导入 JS 文件答案

【问题标题】：How to import a JS file in kotlin/JS如何在 kotlin/JS 中导入 JS 文件
【发布时间】：2020-07-02 10:16:48
【问题描述】：

我正在尝试将 THREE.js 与 kotlin/JS 一起使用。到目前为止它工作得很好，但是，我在如何导入 gLTFLoader 方面遇到了困难。文档说我应该这样做：

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

在科特林中

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

在文件的开头起作用。

这个

@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
}

不起作用。还有

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

也不起作用。在这两种情况下，我都会得到 p>

找不到模块：错误：无法解决 '@three/examples/jsm/loaders/GLTFLoader' 在 '/my_project_dir/build/js/packages/z-index/kotlin'

所需文件在 /my_project_dir/build/js/node_modules/three/examples/jsm/loaders/GLTFLoader.js Three.js 的主文件，显然可以在 /my_project_dir/build/js/node_modules/three/src/Three.js 中找到。

如何进行所需的导入？

【问题讨论】：

标签： kotlin three.js kotlin-js kotlin-js-interop

【解决方案1】：

您应该对类似的语句使用 require 在three.kt中，定义你的定义

@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
}

然后在三个.dsl.kt 中定义

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

现在你可以使用 GTFLLoader

【讨论】：