Angular 2 and Three.js

 

So I've been attempting to implement THREE.js into my Angular 2 app. I have not been able to successfully import the libraries into Angular 2. There are a few projects that have outdated source code, that run with either Angular 2 (beta) or Angular js. Right now I'd be ecstatic to have a blank project that runs THREE.js, from there I could start my directives.

If anyone knows of any good examples or pointers on how to add THREE.js to an angular 2 project, I'd appreciate it.

You can implement Three.js into your Angular2 app in 2 steps:

  • add the library to your modules with npm install three command;
  • put import * as THREE from 'three' inside your component or service.

    • For typings support execute npm install --save @types/three .

    I've been recently fighting for days with three.js in Angular 5.2.9. I tried each way of importing three.js library into my project and here's what I found the best:

  • Download three.js from official website
  • Use .js files from build folder (I went with three.min.js)
  • You can also find additional methods in src folder (eg. CSS3DRenderer)
  • Put those files into your project (I have them in ./assets/libraries/
  • Import the scripts in index.html after opening of body tag.
  • Define THREE in typings.d.ts: declare var THREE: any;
  • You can also npm install @types/three to get additional typings support.

    • This is the only way I managed to get all the methods I wanted working. If you want only basic Three.js methods then installing the library through npm will be just fine. However I needed CSS3DRenderer and so this the only way that worked for me.

    You should use the angular-cli.json file so the 3 steps would be:

  • Add the library to your modules with npm i three --save command.

  • Include the library in the "angular-cli.json" file in the "scripts" area: 

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

  • Put declare var THREE:any; at the top of your component or service.

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

    上一篇: modelr：用重采样数据拟合多个模型

    下一篇: Angular 2和Three.js