我怎样才能导入@类型/三角2

Question

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

sudo npm install @types/three --save 

而且我用多种方式编辑了我的tsconfig.json。我甚至试图在polyfills.browser.ts中添加“three/three”导入。但我不断收到解决模块错误。也许有什么毛病我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 /模块时，我不知道我在做什么。任何帮助将不胜感激，谢谢！

Answer 1

您还必须安装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); 
    } 
} 

地图添加在systemjs.config.js

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