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

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

0 голосов
/ 06 мая 2018

Я хочу расширить определения типов, импортированные в проект ng6, используя Three.js (@types/three/index) с набором функций, которые будут напрямую присоединены к тому же «пространству имен». Что-то вроде: THREE.myFunction(). Я не хочу объявлять THREE как any для подавления проверки типов и линтера, и я предполагаю, что можно было бы обернуть ванильную JS-функцию, расширяющую THREE, используя класс / функцию 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 в новый массив 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 "(импортированный как" ТРИ ") не найден в" трех "

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

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

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

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

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

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

В ожидании полной переписки примеров для совместимости с модулями и пространствами имен 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:

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

Как использовать небольшую вспомогательную библиотеку, я хочу сделать то же самое - я нашел это: https://www.npmjs.com/package/ng-three

0 голосов
/ 09 мая 2018

Я наконец-то достиг двух рабочих решений (=> обходных путей, если быть точным).

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

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

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

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

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

Используйте три-полный для предоставления ТРИ пространства имен

Проект 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();
...