类型'typeof“..node_modules/@types/three/index”'上不存在属性'DecalGeometry'

Question

我在 Angular6 应用程序中使用“three.js”和“three-decal-geometry”。进口见下文：

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'?

我的 package.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 i 三贴花几何，甚至尝试包括

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

按照https://www.npmjs.com/package/three-decal-geometry 的指示在 index.html 中

Answer 1

这不是 Three.js 的问题。看起来您使用的是 TypeScript，问题是您使用的是外部脚本（这不是核心 three.js 的一部分）而没有声明其类型。

当您在开发依赖项中包含“@types/three”时，您将包含仅核心 three.js 库的 TypeScript 定义。因此，当您尝试使用 THREE.DecalGeometry 时，您的编译器会说“等一下，DecalGeometry 不是 THREE 的一部分！”

一个快速的解决方案是简单地将类型转换为any。这样做会告诉 TypeScript 不要执行类型检查，尽管它不会捕获任何错误：

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

更复杂的解决方案是编写您自己的DecalGeometry.d.tsTypeScript Declaration file，并使用DecalGeometry 中的所有属性和方法。

更新：我写了一个快速而肮脏的声明文件。只需将它作为typings/threeExtras.d.ts 保存在您的应用程序中，重新启动您的应用程序，您的编译器应该会找到它：

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

Answer 2

我仍然对 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);