如何在angular2中导入@types/three

经过几个小时的搜索和测试。我终于放弃了。我在网页包中使用Angular2，我尝试在Angular2应用程序中使用three.js。我已经安装了npm包@type/three

sudo npm install @types/three --save

我还以多种方式编辑了我的tsconfig.json。我甚至尝试在polyfills.browser.ts中添加导入“三/三”。但我一直无法解决模块错误。可能我的tsconfig.json有如下错误

    {
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "outDir": "dist",
        "rootDir": ".",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "typeRoots": [
            "./node_modules/@types"
        ],
        "types": [
            "core-js",
            "node",
            "three"
        ]
    },
    "exclude": [
        "node_modules"
    ],
    "awesomeTypescriptLoaderOptions": {
        "useWebpackText": true
    },
    "compileOnSave": false,
    "buildOnSave": false,
    "atom": {
        "rewriteTsconfig": false
    }
}

我在我的组件中至少尝试了以下语法

import {THREE} from "@types/three";
import {THREE} from "three";
import "@types/three";
import "three";
import * as _ from "@types/three";
import * as _ from "three";

---

事实上，我并不真正理解所有这些tsconfig、webpackconfig是如何工作的，所以当我试图实现这个@types/模块时，我不知道我在做什么。任何帮助都将不胜感激，谢谢

您还必须安装three.js包

npm install three --save
npm install @types/three --save

测试组件：

import { Component, AfterViewInit } from '@angular/core';
import * as THREE from 'three';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent implements AfterViewInit {
  name = 'Angular';
  scene: any;
  camera: any;
  renderer: any;
  geometry: any;
  material: any;
  mesh: any;

  ngAfterViewInit() {
    this.init();
    this.animate();
  }

  init() {
    this.scene = new THREE.Scene();

    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    this.camera.position.z = 1000;

    this.geometry = new THREE.BoxGeometry(200, 200, 200);
    this.material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

    this.mesh = new THREE.Mesh(this.geometry, this.material);
    this.scene.add(this.mesh);

    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(this.renderer.domElement);

  }

  animate() {
    requestAnimationFrame(this.animate);
    this.mesh.rotation.x += 0.01;
    this.mesh.rotation.y += 0.02;
    this.renderer.render(this.scene, this.camera);
  }
}

---

非常感谢你！看起来我缺少的是npm 3包，我在“依赖项”中添加了包3，在“devdependency”中添加了@types/3，而且我没有在wwebpack.config.js中添加任何内容，它正在工作。在我在webpack.config.js中的defaultConfig中添加了三个：'npm:/three/build/three.min.js'。它也在工作，所以我不知道我该怎么处理我的webpack.config.js。你能解释一下吗？谢谢！更新。在tsconfig.json中，我在{“compilerOptions”：{“types”：[“three”]}中添加了“three”。因此，当新建3.Scene（）时，我的PHPStorm不会报告错误。我必须在测试组件中将“requestAnimationFrame（this.animate）；”替换为“requestAnimationFrame（this.animate.bind（this））；”。是否可以在此工作流中使用

正交轨迹球控件

？我将如何使用它们？

'three': 'npm:/three/build/three.min.js',