如何将Three.js加载器导入Angular 6项目

Question

我想使用Three.js（@types/three/index）扩展导入到ng6项目中的类型定义，其中包含一组将直接附加到同一“命名空间”的函数。类似于：THREE.myFunction()。 我不想将THREE声明为any 来抑制类型检查和linter，我想可以使用TS包装一个扩展THREE的vanilla JS函数类/函数，然后利用typings.d.ts。

导入装载程序

首先，我想将THREE.js加载器导入到我的项目中，并且通常定义了一个扩展THREE的vanilla函数。

我正在尝试将BinaryLoader导入到ng服务中，但我不确定如何以正确的方式执行此操作。

到目前为止我做了什么：

1. npm install three --save
2. npm install @types/three --save-dev
3. import * as THREE from 'three';
4. 将BinaryLoader添加到新的 angular.json scripts数组

angular.json

        "scripts": [
          "./node_modules/three/examples/js/loaders/BinaryLoader.js"
        ]

到目前为止一切顺利，但现在我需要创建一个二进制加载器：

import * as THREE from 'three';
// import { BinaryLoader } from 'three';
// import 'three/examples/js/loaders/BinaryLoader';

export class ThreeManagerService {
   const loader = new THREE.BinaryLoader();
   ...

我必须找到以某种方式将BinaryLoader添加到@types/three/index的方法。通过这种方式，我应该能够扩展类型定义，以便能够创建新类型THREE.BinaryLoader。有可能做那样的事吗？

我得到的警告是：

  警告在./src/app/shared/three-manager.service.ts中   24：25-43“导出'BinaryLoader'（导入为'THREE'）未在'三'中找到

沉默类型警告和TS转发器

解决警告和错误的解决方法可能是这样的：

import * as THREEJS from 'three';
declare const THREE: any;

export class ThreeManagerService {
   const loader = new THREE.BinaryLoader();

事实是，我认为这种解决方法是一个非常难看的“修复”。我想尽可能地使用类型系统。

编辑：获取与Intellisense＆amp; amp;打字稿

在等待完全重写示例以与ES6模块和命名空间兼容时，可以在/src/node_modules/three-extras/index.ts中定义一个公开和扩充全局的本地模块：

import * as THREE from 'three';

declare global {
   interface Window {
      THREE: typeof THREE;
   }
}

window.THREE = THREE;

require('three/examples/js/controls/OrbitControls');
require('three/examples/js/loaders/GLTFLoader');

via：https://github.com/mrdoob/three.js/issues/9562#issuecomment-386522819

相关且有用的答案：

• https://stackoverflow.com/a/42602169/1977778
• https://stackoverflow.com/a/42623509/1977778

Answer 1

我终于达到了两个有效的解决方案（=>确切的解决方法）。

使用Webpack的imports-loader

  

[...] import-loader是一个Webpack插件，允许您将全局变量注入模块的范围。因此，执行上下文的全局（!）命名空间仍然完全干净，但在“编译”期间，Webpack将能够找出在哪里查找仅带有全局变量的模块的绑定。 / p>

通过this three.js ticket

import "imports?THREE=three!loaders/BinaryLoader";

使用此导入，我们告诉Webpack使用THREE作为由npm模块'three'定义的全局变量，并且BinaryLoader不会被绑定到任何变量。

使用three-full提供THREE命名空间

项目three-full扩展了标准three.js库定义的命名空间，添加了几个“示例”，如加载器和控件。使用它而不是经典的three npm包，可以完全支持ES6名称空间，用于最常见和最有用的类，这些类通常是基于three.js的绝大多数项目的一部分。

npm install --save three-full

然后您可以导入整个命名空间：

import * as THREE from 'three-full';
...
const loader = new THREE.ColladaLoader();  

Answer 2

我如何使用一个小的帮助程序库，我正在寻找相同的东西-我找到了一个：https://www.npmjs.com/package/ng-three

Answer 3

两步，安装包，然后类型。

1. npm 安装三个 --save
2. npm install @types/three --save-dev

然后在您的组件中导入如下： import * as THREE from 'three';

你已经设置好了类型和包。