web-dev-qa-db-fra.com

Comment importer un chargeur Three.js dans un Angular 6 projet

Je souhaite étendre les définitions de types importées dans un projet ng6 à l'aide de Three.js (@types/three/index) avec un ensemble de fonctions qui seront directement attachées au même "espace de noms". Quelque chose comme: THREE.myFunction(). Je ne veux pas déclarer TROIS en tant que any pour supprimer la vérification de type et le linter, et j'imagine qu'il serait possible d'envelopper une fonction Vanilla JS qui étendent TROIS en utilisant une classe/fonction TS, puis en tirant parti de typings.d.ts.

Importer un chargeur

Tout d’abord, je voudrais importer un chargeur THREE.js dans mon projet, et c’est normalement défini une fonction Vanilla qui étend THREE.

J'essaie d'importer la BinaryLoader dans un service ng et je ne suis pas sûr de savoir comment le faire de la bonne manière. 

Ce que j'ai fait jusqu'à présent:

  1. npm install three --save
  2. npm install @types/three --save-dev
  3. import * as THREE from 'three';
  4. ajoutez le chargeur binaire au nouveau tableau angular.jsonscripts

angular.json

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

Jusqu'ici tout va bien, mais maintenant je dois créer un chargeur binaire:

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

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

et je dois trouver le moyen d'ajouter la BinaryLoader à @types/three/index d'une manière ou d'une autre. De cette façon, je devrais pouvoir étendre les définitions de type afin de pouvoir créer un nouveau type THREE.BinaryLoader. Est-il possible de faire quelque chose comme ça?

L'avertissement que j'ai reçu est:

AVERTISSEMENT dans ./src/app/shared/three-manager.service.ts 24: 25-43 "export '' BinaryLoader '(importé sous le nom' THREE ') n'a pas été trouvé dans' trois '

Avertissements de type silencieux et transpiler TS

Une solution de contournement pour se débarrasser des avertissements et l'erreur pourrait être quelque chose comme ça:

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

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

le fait est que je considère cette solution de contournement comme une "solution" très moche. Je voudrais utiliser le système de type autant que possible.

EDIT: Obtenez des exemples pour jouer à Nice avec Intellisense & TypeScript

En attendant qu'une réécriture complète des exemples soit compatible avec les modules et les espaces de noms ES6, il pourrait être possible de définir un module local qui expose et complète le global, en /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

Réponses SO utiles et utiles:

angularthree.jsangular-cliangular6
4
sentenza

J'ai finalement atteint deux solutions de travail (=> solutions de contournement pour être précis). 

Utilisation du gestionnaire des importations de Webpack

[...] import-loader est un plugin Webpack qui vous permet d'injecter une variable globale dans le scope de votre module. Ainsi, l'espace de nom global (!) de votre contexte d'exécution reste toujours parfaitement propre, mais lors de la "compilation", Webpack sera en mesure de déterminer où rechercher la liaison pour un module contenant uniquement une variable globale.

Via ce ticket three.js 

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

En utilisant cette importation, nous indiquons à Webpack d'utiliser THREE en tant que variable globale définie par le module npm 'three' et que BinaryLoader ne sera lié à aucune variable.

Utilisez three-full pour fournir l'espace de noms TROIS

Le projet three-full étend l’espace de noms défini par la bibliothèque standard trois.js en ajoutant plusieurs "exemples", tels que les chargeurs et les contrôles. En l'utilisant à la place du paquetage three npm classique, il sera possible de prendre en charge intégralement les espaces de noms ES6 pour les classes les plus courantes et les plus utiles, qui font généralement partie de la grande majorité de ces projets basés sur three.js.

npm install --save three-full

Et ensuite, vous pouvez importer l'intégralité de l'espace de noms:

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

Comment utiliser une petite bibliothèque d'aide, je cherche à faire de même - j'ai trouvé celui-ci: https://www.npmjs.com/package/ng-three

0
Devin McQueeney