在 Angular2 中使用 three.js答案

【问题标题】：Using three.js in Angular2在 Angular2 中使用 three.js
【发布时间】：2016-10-17 11:24:26
【问题描述】：

我正在尝试将 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();
}
///////////////

问题出现在这一行 - import { THREE } from 'three-js/three';

这与 'angular2/core' 在同一目录路径中

提前致谢。

【问题讨论】：

标签： angular three.js angular2-directives

【解决方案1】：

你在使用 angular cli 吗？

如果是这样，请不要忘记在您的 typings.d 文件中添加参考：

declare module 'three';

https://github.com/angular/angular-cli#3rd-party-library-installation

3rd Party Library Installation

Simply install your library via npm install lib-name --save and import it in your code.

If the library does not include typings, you can install them using npm:

npm install d3 --save
npm install @types/d3 --save-dev
If the library doesn't have typings available at @types/, you can still use it by manually adding typings for it:

// in src/typings.d.ts
declare module 'typeless-package';

// in src/app/app.component.ts
import * as typelessPackage from 'typeless-package';
typelessPackage.method();

【讨论】：

第 3 方库安装文档的链接好像失效了。实际上，我再也找不到关于此的任何文档了。

【解决方案2】：

查看ng2-three-demo，我使用 Angular 组件为 ThreeJS 定义对象。

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

【讨论】：

对我来说，您的申请非常有帮助，非常感谢。干得好！

【解决方案3】：

应该是这样导入的：

import * as THREE from 'three';

【讨论】：

【解决方案4】：

我开始了解有关将其他库集成到您自己的项目中的 Angular 2 细节，所以我猜它必须包含在您的 system.js 配置文件夹中。

我真正想给你看的是this angular 2 + three.js implementation 让您对这个主题有所了解。

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

干杯！

【讨论】：

希望您现在可以评论 @Bruno Di Guiseppe 在您链接到的那个 repo 中，有一个 vendor 文件夹，其中包含三个.js 文件。这是强制性的，还是由于在 package.json 的依赖项中引用“three”：“^0.80.1”，导致three.js 文件存在于 node_modules 目录中？如果是这样，导入的语法是什么？我收到“找不到模块‘三’。”当我尝试从“三个”导入 { THREE } 时；在我的一个 Injectable 服务文件中
谢谢本！因此，据我了解 Angular 2 的“左手路径”，您可以创建自己的 .js 库并为那些在 Angular 中使用的库进行分型。我需要在我的项目中使用DeviceOrientationControl library，它没有类型定义。由于最终 Angular 会将 TS 编译为 JS，因此您可以在 index.html 中包含一个带有常规
给我一些时间，我会把它贴在 Git 上给你看。但总而言之，TS 定义（例如 library.d.ts）就像一个 DLL 元数据文件。你告诉计算机“嘿，我将使用具有这些功能和参数的东西。确保你不要抱怨我使用它们，好吗？”如果它发现您在运行时使用的这些定义，一切都很好