Angular5中的ThreeJS DragControls

Question

我正在尝试在angular5（angular-cli）项目中设置threejs。 普通的threejs只需安装即可很好地工作

 npm install three and npm install @types/three;

但是我不知道使用存在于三个/examples/js/controls/DragControls.js中的控件的方法

我尝试关注

• npm安装三个拖动控件。这不会导入DragControls，并且对象始终是未定义的

  '从'three-dragcontrols'导入{DragControls};

• 试图将所有js文件添加到.angular-cli脚本标签的3 / examples / js / controls中。但是脚本js捆绑包包含在包含ThreeJS的供应商捆绑包之前。

• 试图将控件复制到Assets文件夹中，并将其作为html页面中的脚本标签，但窗口对象THREE尚未定义，因此不起作用。

• 我现在唯一看到的选择是将代码作为源代码检入并将其转换为打字稿（重命名文件并修复掉毛问题等）

在Angular应用程序中包含DragControls / MapControls等的正确方法是什么？

Answer 1

在Node中，您可以轻松地将大多数库转换为模块，而不仅限于NPM存储库。进入DragControls文件，并在其他所有内容的顶部添加以下行：

module.exports = function(){

   <library-code>...</library-code>

};
module.exports();

注意：库代码只是为了引起您的注意，您只需要将该库的JavaScript代码放在 function（）{}; 括号之间，像上面的示例一样，由module.exports分配并在代码末尾调用它。

例如，我实际上没有可以使用的CanvasJS NPM模块。所以我把它变成了一个模块。不要忘记您需要的package.json，否则对于Node来说，没有模块。

从那里，您将能够需要它。如果您想在任何地方使用它，请创建一个Angular服务，并在该文件中require（）。

您可以自己在以下位置查看：https://github.com/Nchaka/-Kinaxis/blob/konkret/node_modules/canvasjs/canvasjs.min.js

如果可以帮助您通过比较学习，则可以使用非模块CanvasJS版本在以下位置找到同一应用程序的非节点版本：https://github.com/Nchaka/Kinaxis