Three.js 的新 Scala.js 外观 -> “找不到模块“三””

Question

由于https://github.com/antonkulaga/threejs-facade 已经严重过时，我尝试了类似https://github.com/Katrix-/threejs-facade 的方法，并希望为新的three.js 库创建一个外观。

我绝不是JS 专家，也不是Scala.js 专家，所以我很可能在做一些非常愚蠢的事情。

在另一个问题之后，我正在使用这个sbt-scalajs-bundler 和sbt-web-scalajs-bundler

我的build.sbt 看起来像这样：

lazy val client = (project in file("modules/client"))
  .enablePlugins(ScalaJSBundlerPlugin, ScalaJSWeb) // ScalaJSBundlerPlugin automatically enables ScalaJSPlugin
  .settings(generalSettings: _*)
  .settings(
    name := "client"
    //, scalaJSModuleKind := ModuleKind.CommonJSModule // ScalaJSBundlerPlugin implicitly sets moduleKind to CommonJSModule enables ScalaJSPlugin
   ,jsDependencies += ProvidedJS / "three.min.js"
  )

lazy val server = (project in file("modules/server"))
  .enablePlugins(PlayScala, WebScalaJSBundlerPlugin)
  .settings(generalSettings: _*)
  .settings(
    name := "server"
    ,scalaJSProjects := Seq(client)
    ,pipelineStages in Assets := Seq(scalaJSPipeline)
    //,pipelineStages := Seq(digest, gzip)
    ,compile in Compile := ((compile in Compile) dependsOn scalaJSPipeline).value
  )

three.min.js 在我的client 项目的资源文件夹中。

Facade 的一部分是例如

@js.native
@JSImport("THREE", "Scene")
class Scene extends Object3D {

我想像这样使用它：val scene = new Scene。在scala.js 方面，这实际上编译得很好，但是当我运行它时，我得到：

错误：找不到模块“三”

在浏览器中，我想知道为什么。毕竟在three.min.js中是这样称呼的。

现在我也尝试从服务器端提供和提供three.min.js 文件，因为我认为它可能只是在运行时丢失了，但不，这似乎不是原因。

所以现在我想知道我在这里做错了什么？

只是为了澄清：如果我不导出 Facade 的任何使用，其余转译的 js 工作得很好！

Answer 1

正如 Scala.js 文档的 this part 中所述，@JSImport 被编译器解释为 JavaScript 模块导入。

当您使用 CommonJSModule 模块类型时（启用 ScalaJSBundlerPlugin 时就是这种情况），此导入将转换为以下 CommonJS 导入：

var Scene = require("THREE").Scene;

此注解仅说明您的 Scala 代码将如何与 JS 世界交互，但它没有说明如何解析提供 THREE 模块的依赖项。

---

使用 scalajs-bundler，您可以通过将以下设置添加到您的 client 项目来定义 how to resolve JS dependencies from the NPM registry：

npmDependencies += "three" -> "0.84.0"

（请注意，您不能使用jsDependencies 来解析这些带有@JSImport 的模块）

另外，请注意使用three.js 的正确CommonJS 导入是"three" 而不是"THREE"，因此您的@JSImport 注释应如下所示：

@JSImport("three", "Scene")

---

或者，如果您不想从 NPM 注册表中解析依赖项，您可以将 CommonJS 模块作为资源文件提供。只需将其放在src/main/resources/Scene.js 下并在@JSImport 中引用如下：

@JSImport("./Scene", "Scene")

您可以看到一个工作示例here。