Свойство 'DecalGeometry' не существует для типа 'typeof "..node_modules / @ types / three / index"'

Question

Я использую 'three.js' и 'three-decal-geometry' с приложением Angular6. См. Ниже для импорта:

import * as THREE from 'three';
import * as OBJLoader from 'three-obj-loader';
import * as DecalGeometry from 'three-decal-geometry';
OBJLoader(THREE);

Когда я пытаюсь вызвать THREE.DecalGeometry, я получаю следующее сообщение об ошибке:

Property 'DecalGeometry' does not exist on type 'typeof "..node_modules/@types/three/index"'. 
Did you mean 'DirectGeometry'?

Мой пакет.json:

"dependencies": {
    "@angular/cdk": "^6.2.0",
    "three": "^0.84.0",
    "three-decal-geometry": "^1.0.0",
    "three-obj-loader": "^1.1.3"
}

"devDependencies": {
   "@types/three": "^0.92.15",
   "@angular/cli": "~6.0.7",
}

Я не уверен, почему я не могу использовать библиотеку DecalGeometry. Я сделал npm я с тремя декалями и даже попытался включить

<script src="THREE.DecalGeometry.js" ></script>

в index.html, как указано в https://www.npmjs.com/package/three-decal-geometry

Answer 1

У меня все еще были проблемы с библиотекой DecalGeometry, поэтому быстрым обходным путем было использование 'require' и приведение типа к любому. Смотрите ответ ниже:

declare var require: any
const THREE = require('three');
const OBJLoader = require('three-obj-loader');
const DecalGeometry = require('three-decal-geometry')(THREE);
OBJLoader(THREE);

Answer 2

Это не проблема Three.js. Похоже, вы используете TypeScript, и проблема в том, что вы используете внешний скрипт (который не является частью ядра three.js) без объявления его типа.

Когда вы включаете "@ types / three" в свои зависимости dev, вы включаете определения TypeScript only библиотеки core three.js. Поэтому, когда вы пытаетесь использовать THREE.DecalGeometry, ваш компилятор говорит: «Подождите, DecalGeometry не является частью ТРИ!»

Быстрое решение - просто привести тип к any. Это говорит TypeScript о том, что не следует проверять тип, хотя он не обнаружит никаких ошибок:

let decal = new (<any>THREE).DecalGeometry(); // <any> type disables type-checking
decal.doWhatever();
decal.nothingMatters(true);

Более сложным решением было бы написать собственный DecalGeometry.d.ts файл декларации TypeScript со всеми свойствами и методами в DecalGeometry.

Обновление: я написал быстрый и грязный файл декларации. Просто сохраните его в своем приложении как typings/threeExtras.d.ts, перезапустите приложение, и ваш компилятор должен его найти:

declare namespace THREE{
    export class DecalGeometry extends Geometry{
        constructor(meshToIntersect: Geometry, position: Vector3, direction: Vector3, dimensions: Vector3, check?: Vector3);
    }
}