我怎樣才能導入@類型/三角2

經過幾個小時的搜索和測試。我終於放棄了。我正在使用帶有webpack的Angular2，我嘗試在我的angular2應用程序中使用three.js。我已經安裝了npm包@type/3我怎樣才能導入@類型/三角2

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 /模塊時，我不知道我在做什麼。任何幫助將不勝感激，謝謝！

來源

2016-12-13 mok

您還必須安裝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',

來源

2016-12-13 09:55:55 Yong

非常感謝您！看起來像npm三個包是我所缺少的，我向我的「依賴關係」和@ types/3添加了三個到我的「devDependencies」，我也沒有添加任何東西到我的wwebpack.config.js，它的工作。在我的webpack.config.js中添加了三個：'npm：/three/build/three.min.js'到defaultConfig後。它也在工作，所以我不知道我想用我的webpack.config.js做什麼。你能解釋一下嗎？非常感謝！ – mok

更新。在tsconfig.json中，我在{「compilerOptions」中添加「three」：{「types」：[「three」]}}。因此，當新的THREE.Scene（）時，我的PHPStorm不會報告錯誤。 – mok

我不得不將「requestAnimationFrame（this.animate）;」與「requestAnimationFrame（this.animate.bind（this））;」在測試組件中。 – blue

我怎樣才能導入@類型/三角2

回答

相關問題