使用 webpack、Threejs 示例和 TypeScript？

我在将 Threejs 示例（如 EffectComposer 或 Detector）中的内容与 webpack 和 typescript 一起使用时遇到了很多麻烦。

先把相关的*.d.ts文件全部存在并通过安装tsd。我的问题是让 webpack 实际上包含默认 Threejs 构建之外的文件（即examples/js/).

With three从 npm 安装我可以做类似的事情

import THREE = require('three');

效果很好，但缺乏上述任何优点。 npm 上还有一些其他的 Threejs 包捆绑了插件，但我认为它们不能与 TypeScript 一起使用（因为require('three-js')(['EffectComposer'])被打字稿编译器拒绝。

有人在这个包中得到了一些东西（比如后处理）来使用打字稿吗？

我设法找到了一种非常干净的方法来设置它webpack.config.js.

根据丹的回答：

$ npm install --save-dev imports-loader

事实证明我们实际上并不需要exports-loader，因为 Three.js 示例将其构造函数添加到THREE object.

然后，在webpack.config.js，我们可以添加一条规则来添加var THREE = require('three');如果模块的路径解析为包含以下内容的任何内容，则指向导入的模块three/examples/js:

module: {
  rules: [
    ...
    {
      test: /three\/examples\/js/,
      use: 'imports-loader?THREE=three'
    }
  ]
}

现在，示例模块将在需要时找到三个全局变量。

然后，为了让导入示例变得不那么冗长：

resolve: {
  alias: {
    'three-examples': path.join(__dirname, './node_modules/three/examples/js')
  },
  ...
},

这假设webpack.config.js与以下目录位于同一目录中node_modules，进行相应调整。

现在，我们可以像这样使用示例文件：

import * as THREE from 'three';
import 'three-examples/controls/OrbitControls';

导入该模块以消除其副作用。

如果您将其与 Typescript 和/或 Babel 一起使用，并且收到有关找不到示例模块的警告THREE，你可能会发现这个问题 https://github.com/webpack-contrib/imports-loader/issues/68 on the imports-loader存储库可供参考。