我有这个错误:
TypeScript错误:node_modules/@types/three/three-core.d.ts(767,24): 错误TS2304:找不到名称'Iterable'。
我使用此指令中的gulp工作流程:https://www.typescriptlang.org/docs/handbook/gulp.html
我为VS2015安装了TypeScript 2.2.2。
这是完整的代码:
import * as THREE from "three";
// https://github.com/pinqy520/three-typescript-starter/blob/master/src/index.ts
class Game
{
private _scene: THREE.Scene;
//private _canvas: HTMLCanvasElement;
private _camera: THREE.PerspectiveCamera;
private _renderer: THREE.WebGLRenderer;
private _axis: THREE.AxisHelper;
private _light: THREE.DirectionalLight;
private _light2: THREE.DirectionalLight;
private _material: THREE.MeshBasicMaterial;
private _box: THREE.Mesh;
public constructor()
{
//this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement);
this._scene = new THREE.Scene();
this._camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
this._renderer = new THREE.WebGLRenderer();
this._axis = new THREE.AxisHelper(10);
this._light = new THREE.DirectionalLight(0xffffff, 1.0);
this._light2 = new THREE.DirectionalLight(0xffffff, 1.0);
this._material = new THREE.MeshBasicMaterial({
color: 0xaaaaaa,
wireframe: true
});
this._box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), this._material);
}
public createScene(): void
{
this._renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this._renderer.domElement);
this._scene.add(this._axis);
this._light.position.set(100, 100, 100);
this._scene.add(this._light);
this._light2.position.set(-100, 100, -100)
this._scene.add(this._light2);
this._box.position.x = 0.5;
this._box.rotation.y = 0.5;
this._camera.position.x = 5;
this._camera.position.y = 5;
this._camera.position.z = 5;
this._camera.lookAt(this._scene.position);
}
public animate(): void
{
requestAnimationFrame(this.animate);
this._render();
}
private _render(): void
{
let timer = 0.002 * Date.now()
this._box.position.y = 0.5 + 0.5 * Math.sin(timer)
this._box.rotation.x += 0.1
this._renderer.render(this._scene, this._camera)
}
}
window.onload = () =>
{
let game = new Game();
game.createScene();
game.animate();
}
答案 0 :(得分:2)
解决方案是:“lib”:[“es2015”,“dom”]
tsconfig.json
{
"files": [
"src/Game.ts"
],
"compilerOptions": {
"noImplicitAny": true,
"target": "es5",
"lib": [ "es2015", "dom" ]
}
}
固定代码示例:http://codepen.io/8Observer8/pen/oWoXyz
/// <reference path="../../node_modules/@types/three/index.d.ts" />
//import * as THREE from "three";
// this line does't work. Error: Cannot find module 'three' from ...
// https://github.com/pinqy520/three-typescript-starter/blob/master/src/index.ts
class Game
{
private _scene: THREE.Scene;
//private _canvas: HTMLCanvasElement;
private _camera: THREE.PerspectiveCamera;
private _renderer: THREE.WebGLRenderer;
private _axis: THREE.AxisHelper;
private _light: THREE.DirectionalLight;
private _light2: THREE.DirectionalLight;
private _material: THREE.MeshBasicMaterial;
private _box: THREE.Mesh;
public constructor()
{
//this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement);
this._scene = new THREE.Scene(); // create the scene
// create the camera
this._camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
this._renderer = new THREE.WebGLRenderer();
this._axis = new THREE.AxisHelper(10); // add axis to the scene
this._light = new THREE.DirectionalLight(0xffffff, 1.0); // add light1
this._light2 = new THREE.DirectionalLight(0xffffff, 1.0); // add light2
this._material = new THREE.MeshBasicMaterial({
color: 0xaaaaaa,
wireframe: true
});
// create a box and add it to the scene
this._box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), this._material);
}
public createScene(): void
{
// set size
this._renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this._renderer.domElement); // add canvas to dom
this._scene.add(this._axis);
this._light.position.set(100, 100, 100);
this._scene.add(this._light);
this._light2.position.set(-100, 100, -100)
this._scene.add(this._light2);
this._scene.add(this._box)
this._box.position.x = 0.5;
this._box.rotation.y = 0.5;
this._camera.position.x = 5;
this._camera.position.y = 5;
this._camera.position.z = 5;
this._camera.lookAt(this._scene.position);
}
public animate(): void
{
console.log("animate");
requestAnimationFrame(this.animate.bind(this));
this._render();
}
private _render(): void
{
let timer = 0.002 * Date.now();
this._box.position.y = 0.5 + 0.5 * Math.sin(timer);
this._box.rotation.x += 0.1;
this._renderer.render(this._scene, this._camera);
}
}
window.onload = () =>
{
let game = new Game();
game.createScene();
game.animate();
}
答案 1 :(得分:2)
将此添加到我的打字稿文件的顶部为我解决了这个问题:
///<reference path="./node_modules/typescript/lib/lib.es6.d.ts"/>