三个 JS + Angular 7 导入控制器后出现错误 BufferAttribute

Question

我正在使用 Angular 7，我想将 Three JS 添加到我的项目中。但是在将其导入组件控制器后出现错误。我确实安装了npm install three --save 和它们的类型npm install @type/webgl2。它在我的终端 VS 代码中显示错误，并且代码也不起作用。我不太确定我是否正确，但我导入的是import * as THREE from 'three';。我一直在 Stackblitz 上关注一个 document，它可以工作，但仍然有错误显示让我无法构建我的项目。有什么办法可以摆脱这些错误？ 这是我的错误的样子：

ERROR in node_modules/three/src/core/BufferAttribute.d.ts(21,6): error 
TS1086: An accessor cannot be declared in an ambient context.
node_modules/three/src/core/InterleavedBufferAttribute.d.ts(19,6): error 
TS1086: An accessor cannot be declared in an ambient context.
node_modules/three/src/core/InterleavedBufferAttribute.d.ts(20,6): error 
TS1086: An accessor cannot be declared in an ambient context.

Answer 1

安装这个devDependencies

npm install --save-dev @types/offscreencanvas
npm install --save-dev @types/webgl2

更新您的 tsconfig.app.json

 "types": ["node", "webgl2", "offscreencanvas"]

package.json 看起来像这样。

{
  "name": "sketch",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.4.0",
    "subsink": "^1.0.0",
    "three": "^0.110.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular/cli": "~8.3.20",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "@types/offscreencanvas": "^2019.6.0",
    "@types/webgl2": "0.0.5",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

tsconfig.app.json 看起来像这样。

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node", "webgl2", "offscreencanvas"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

Answer 2

只需使用

“三”：“^0.110.0”

Answer 3

对于 Angular 8 我们可以做到 正如 Omar Arturo 所说，我们可以将 threejs 降级到 0.110.0 但不能开箱即用，我们必须这样做

npm install @types/webgl2

和tsconfig.app.json

"types": ["node", "webgl2", "offscreencanvas"]

应该可以的。

Answer 4

看起来这个问题在最新的 Three r115 中得到了解决。开箱即用。

Answer 5

你必须做两件事。另外，请确保您安装了以下模块，

步骤 01： 安装 devDependencies

npm install --save-dev @types/offscreencanvas

然后更新 tsconfig.app.json

"types": ["node", "webgl2"]

步骤 02： 转到 tsconfig.json 文件并在 "compilerOptions" 对象中添加 skipLibCheck: true。 例如：

"compilerOptions": {
    ...
    ...
    "skipLibCheck": true, 
  },

更多信息：此错误是由于打字稿版本问题而发生的。因此，您可以通过跳过 lib 检查来解决此问题。事实上，其他一些人也面临着 WebGL 问题。因此，如果您使用的是 three.js，那么这些解决方案将解决您的问题。