Angular Template For Dummies: atft library + full demo

Leverage Three.js in your Angular app using simple directives:

<atft-orbit-controls [rotateSpeed]=1 [zoomSpeed]=1.2>
  <atft-webgl-renderer>
    <atft-perspective-camera
      [fov]=60 [near]=1 [far]=1100
      positionX=20 positionY=50 positionZ=50>
    </atft-perspective-camera>
    <atft-scene>
      <atft-axes-helper size=200></atft-axes-helper>
      <atft-grid-helper size=100 divisions=10></atft-grid-helper>
    </atft-scene>
  </atft-webgl-renderer>
</atft-orbit-controls>

• atft library: Reusable Angular library giving you all the Three.js bindings
  • SceneComponent with basic usage of scene, camera, lights, axis helper, raytracer, renderer
  • Integrated Three.js examples as directives (e.g. OrbitControls, OBJLoader. MTLLoader)
• this template repository: Template and demo showing how to use atft. Use it as a template for your project to get quickly started!

Full Demo

Click below to see demo in web browser:

Demo source: https://github.com/makimenko/angular-template-for-threejs

Usage

1. git clone https://github.com/makimenko/angular-template-for-threejs.git
2. npm install
3. ng build atft
   Build the atft library, must only be run once.
4. ng serve --open

To build and watch "atft" library, please change imports in "app.module.ts" from:

import { AtftModule } from 'atft';

to:

import { AtftModule } from 'projects/atft/src/lib/atft.module';

API Documentation

For mode details see API documentation

Contributors (sorted alphabetically)

• ComFreek
• Mihails Akimenko