Как импортировать загрузчик Three.js в проект Angular 6 - angular


1

Я хочу расширить определения типов, импортированные в проект ng6, используя Three.js(@types/three/index) с набором функций, которые будут напрямую привязаны к одному и тому же "пространству имен". Что-то вроде: THREE.myFunction(). Я не хочу, чтобы объявить три, как any, чтобы подавить проверку типов и линт, и я думаю, что можно было бы обернуть функцию ванили JS, которые проходят ТРИ использование класса/функций TS, а затем воспользовавшись typings.d.ts.

Импорт загрузчика

Прежде всего, я хотел бы импортировать загрузчик THREE.js в свой проект и обычно определял функцию ванили, которая расширяет THREE.

Я пытаюсь импортировать BinaryLoader в службу ng, и я не уверен, как это сделать правильно.

Что я сделал до сих пор:

  1. npm install three --save
  2. npm install @types/three --save-dev
  3. import * as THREE from three;
  4. добавьте BinaryLoader в новый массив scripts angular.json

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 "export BinaryLoader (импортировано как THREE) не найдено в three

Предупреждения типа Silencing и транспилятор TS

Обходной путь, чтобы избавиться от предупреждений и ошибок, может быть примерно таким:

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

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

дело в том, что я считаю, что это обходное решение очень уродливое "исправление". Я хотел бы использовать систему типов как можно больше.

РЕДАКТИРОВАТЬ: Приготовьте примеры, чтобы играть хорошо с Intellisense & Typcript

Ожидая полного переписывания примеров, совместимых с модулями 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);

через: https://github.com/mrdoob/three.js/issues/9562#issuecomment-386522819

Связанные и полезные ответы SO:

Источник
  •  45
  •  1
  • 4 мар 2020 2020-03-04 06:45:55

1 ответ

2

Наконец, я достиг двух рабочих решений (=> обходных решений).

Использование импортного загрузчика Webpack

[...] import-loader - это плагин Webpack, который позволяет вводить глобальную переменную в область вашего модуля. Таким образом, глобальное (!) Пространство имен вашего контекста выполнения по-прежнему остается полностью чистым, но во время "компиляции" Webpack сможет выяснить, где искать привязку для модуля, который поставляется только с глобальной переменной.

Через этот билет three.js

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

Используя этот импорт, мы сообщаем Webpack использовать THREE в качестве глобальной переменной, определяемой модулем npm модуля three n three а BinaryLoader не привязан к какой-либо переменной.

Используйте три-полно, чтобы предоставить пространство имен THREE

Проект три-полно расширяет пространство имен, определенные с помощью стандартной библиотеки Three.js, добавив несколько "примеров", как погрузчики и управление. Используя его вместо классического three пакета npm, можно будет получить полную поддержку пространств имен ES6 для наиболее распространенных и полезных классов, которые обычно являются частью подавляющего большинства этих проектов на основе three.js.

npm install --save three-full

И затем вы можете импортировать все пространство имен:

import * as THREE from three-full;
...
const loader = new THREE.ColladaLoader();  
  • 4 мар 2020 2020-03-04 06:45:56