Barkarula / angular-template-for-threejs

Angular Template For Three.js

Home Page:https://makimenko.github.io/angular-template-for-threejs/storybook

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

GitHub repo CI build status Greenkeeper badge 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:

Goals of this repo

  • Implement npm atft library
    • Bindings for Three.js
    • SceneComponent with basic usage of scene, camera, lights, helpers, renderer
    • Integrated Three.js examples as components (e.g. OrbitControls, OBJLoader, ObjectLoader)
  • Develop and test library components in isolation via Storybook

Usage in your Angular project

  1. Set up an Angular project and install dependencies:
    npm i three three.meshline atft --save

  2. Import library into your module:

    import { AtftModule } from 'atft';
    ...
      imports: [
        ...
        AtftModule
      ]
     ...
  3. Use atft library components in src/app.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;
     } 

Development

Build Library

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

Run Tests

  • npm test

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

Contributors

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

About

Angular Template For Three.js

https://makimenko.github.io/angular-template-for-threejs/storybook

License:MIT License


Languages

Language:TypeScript 96.4%Language:JavaScript 2.1%Language:HTML 1.4%Language:CSS 0.2%