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

Posted 2023-02-27

【中文标题】三个 JS + Angular 7 导入控制器后出现错误 BufferAttribute

【英文标题】：Three JS + Angular 7 getting error BufferAttribute after imported to controller

【发布时间】：2020-03-28 19:54:07

【问题描述】：

我正在使用 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.

【问题讨论】：

您能发布您收到的确切错误消息吗？

是的，我已经更新了我的问题。

也许这会有所帮助 - ***.com/questions/58802463/…

你能接受答案吗？

【参考方案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"
  ]

【讨论】：

这个解决方案在我的情况下不起作用，我使用 angular 8 和 angular 8 支持 typescript

看类型

我已经安装了类型并包含在 tsconfig.app.json 中，但是可以正常工作

【参考方案2】：

只需使用

“三”：“^0.110.0”

【参考方案3】：

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

npm install @types/webgl2

和tsconfig.app.json

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

应该可以的。

【参考方案4】：

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

【参考方案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，那么这些解决方案将解决您的问题。