Angular 2和Three.js

 

所以我一直试图在我的Angular 2应用中实现THREE.js。 我还没有能够成功地将这些库导入到Angular 2中。有一些项目的源代码已经过时，可以与Angular 2（beta）或Angular js一起运行。 现在我会欣喜若狂地拥有一个运行THREE.js的空白项目，从那里我可以开始我的指令。

如果有人知道如何将THREE.js添加到角度2项目的任何好例子或指针，我会很感激。

您可以分两步实施Three.js到您的Angular2应用程序中：

  • 使用npm install three命令将库添加到模块中;
  • 将组件或服务中的import * as THREE from 'three' 。

    • 对于npm install --save @types/three支持执行npm install --save @types/three 。

    我最近在Angular 5.2.9中用three.js与天战斗。 我尝试了将three.js库导入到我的项目中的各种方式，以下是我找到的最好的方法：

  • 从官方网站下载three.js
  • 使用build文件夹中的.js文件（我使用three.min.js）
  • 您还可以在src文件夹中找到其他方法（例如CSS3DRenderer）
  • 把这些文件放到你的项目中（我有他们在./assets/libraries/
  • 打开body标签后，在index.html中导入脚本。
  • 在typings.d.ts中定义THREE： declare var THREE: any;
  • 您也可以使用npm install @types/three来获得额外的npm install @types/three支持。

    • 这是我设法获得所有想要工作的方法的唯一方法。 如果你只需要基本的Three.js方法，那么通过npm安装库就可以了。 不过，我需要CSS3DRenderer，所以这是唯一适用于我的方法。

    您应该使用angular-cli.json文件，这样3个步骤将是：

  • 用npm i three --save命令将库添加到你的模块。

  • 将库包含在“scripts”区域的“angular-cli.json”文件中： 

    "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/three/build/three.min.js",
],

  • 把declare var THREE:any; 位于组件或服务的顶部。

    • 链接地址: http://www.djcxy.com/p/36881.html

    上一篇: Angular 2 and Three.js

    下一篇: change timeline label span