Home

Awesome

GitHub repo CI build status Known Vulnerabilities Code coverage by codecov.io npm version Storybook link

Angular Template For Three.js (atft)

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

<atft-orbit-controls [rotateSpeed]=1 [zoomSpeed]=1.2>
  <atft-renderer-canvas>
    <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-renderer-canvas>
</atft-orbit-controls>

Storybook

Explore provided Angular components in isolation!

Click below to see the demo in a web browser:<br> <a href="https://makimenko.github.io/angular-template-for-threejs/storybook"> <img src="https://raw.githubusercontent.com/makimenko/files/master/angular-template-for-threejs/images/storybook.gif"> </a>

Goals of this repo

Usage in your Angular project

  1. Set up an Angular project and install dependencies:

    npm i three dagre atft yaml --save
    npm i @types/dagre @types/three --save-dev
    
  2. Import library into your module:

    import { AtftModule } from 'atft';
    ...
      imports: [
        ...
        AtftModule
      ]
     ...
    
  3. Use atft library components in src/app.component.html:

    <atft-orbit-controls [rotateSpeed]=1 [zoomSpeed]=1.2>
      <atft-renderer-canvas #mainRenderer>
        <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-renderer-canvas>
    </atft-orbit-controls>
    
  4. (optionally) if you want to fit 3D scene canvas into entire screen (horizontally and vertically):

    in src/styles.css:

     html, body {
         height: 100%;
         margin: 0;
     }  
    

    in src/app/app.component.css:

     :host {
         height: 100%;
         display: flex;
     } 
    

Used by

Sample vect project, which is based on atft library:

<a href="https://github.com/makimenko/vect"> <img src="https://raw.githubusercontent.com/makimenko/files/master/vect/images/demo.gif"> </a>

Development

Build Library

  1. git clone https://github.com/makimenko/angular-template-for-threejs.git
  2. npm install
  3. ng build atft

Run Tests

Run Storybook

Run and watch locally: npm run storybook

Our storybook config is in ./storybook and our stories in ./src/stories. See the official Storybook.js documentation for more information.

API Documentation

For mode details see API documentation

Release and Changelog

To automatically generate changelog and bump atft version:

npm run release

Contributors

Feel free to join us! Just submit your ideas via pull-requests :)