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上使用了十进制几何图形，甚至尝试过

<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”时，您将包含 only 核心Three.js库的TypeScript定义。因此，当您尝试使用let elements = document.querySelectAll("[data-unformatted]"); elements.foreach(element =>{ element.innerHTML = formatfunct(element.getAttribute("data-unformatted")); }时，编译器会说：“等等，DecalGeometry不是三分之一！”

一种快速的解决方案是将类型简单地转换为THREE.DecalGeometry。这样可以告诉TypeScript尽管不捕获任何错误，但不要执行类型检查：

any

一个更复杂的解决方案是使用let decal = new (<any>THREE).DecalGeometry(); // <any> type disables type-checking decal.doWhatever(); decal.nothingMatters(true);中的所有属性和方法编写自己的DecalGeometry.d.ts TypeScript Declaration file。

更新：我写了一个快速而肮脏的声明文件。只需将其另存为DecalGeometry到您的应用中，重新启动您的应用，编译器便会找到它：

typings/threeExtras.d.ts

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);

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

2 个答案: