在Angular2中使用three.js

我正在尝试将一个three.js场景集成到一个angular 2页面中。我是Angular 2和javascript的初学者，我在script标记中包含了three.js文件，在index.html中，也就是说，在scene.component.ts文件中，我有如下代码

//scene.component.ts
import { Component } from 'angular2/core';
import { THREE } from 'three-js/three';
@Component({
    selector: 'ps-scene',
    templateUrl: 'app/webgl/scene.component.html'
})
export class SceneComponent{
    scene = new THREE.Scene();
}
///////////////

问题出现在从'ThreeJS/THREE'导入{THREE}一行中

这与“angular2/core”位于同一目录路径中

---

提前感谢。

我开始介绍Angular 2关于将其他库集成到您自己的项目中的细节，所以我猜它必须包含在您的system.js config文件夹中

我真正想告诉你的是 让你了解一下这个问题

我会把它作为评论发布，但我还没有这样做的名声

---

干杯

您正在使用angular cli吗

如果是这样，请不要忘记在typings.d文件中添加引用：

declare module 'three';

---

它可能应该这样导入：

import * as THREE from 'three';

检查一下，在这里我使用角度组件为ThreeJS定义对象

---

此外，在repo中有一个关于主题本身的演示。

希望您现在可以在链接到的repo中评论@Bruno Di Guiseppe，这里有一个vender文件夹，其中存放着three.js文件。这是强制性的，还是由于在package.json的依赖项中引用了“three”：“^0.80.1”，因此three.js文件可以存在于node_modules目录中？如果是，要导入的语法是什么？当我尝试从“三”导入{three}时，我得到“找不到模块'three.”；在我的一个可注入服务文件中，谢谢Ben！因此，就我对Angular 2的“左手路径”的理解而言，您可以创建自己的.js库，并为Angular中使用的那些库进行打字。我需要在我的项目中使用，但它没有打字定义。由于angular最终会将TS编译成JS，因此您可以在index.html中包含一个.JS文件，其中包含一个常规标记，然后编写自己的定义并将其保存在typings文件夹中。给我一些时间，我会将其发布到Git上供您查看。但总而言之，TS定义（例如library.d.TS）就像DLL元数据文件一样。您告诉计算机“嘿，我将使用具有这些函数和参数的东西。请确保您不会抱怨我使用了它们，好吗？”如果它发现您在运行时使用的这些定义，一切正常。似乎指向第三方库安装文档的链接不再起作用。事实上，我再也找不到关于这个的任何文档了。对我来说，你的申请非常有用，非常感谢。干得好！

import * as THREE from 'three';