Overview

The Angular Template For Three.js (atft) is a library that allows users to leverage the power of Three.js in their Angular app using simple components. By providing a set of Angular components, users can easily integrate and explore Three.js functionalities in their projects.

Features

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

Installation

To install the Angular Template For Three.js (atft) library, follow these steps:

1. Set up an Angular project:

   ng new my-angular-project
   cd my-angular-project
   

2. Install the library and its dependencies:

   npm install angular-template-for-threejs
   

3. Import the library into your module:

   import { AtftModule } from 'angular-template-for-threejs';
   
   @NgModule({
     imports: [
       // Other modules
       AtftModule
     ],
     // Other configurations
   })
   export class AppModule { }
   

4. Use the atft library components in your Angular template:

   <atft-scene>
     <!-- Your content here -->
   </atft-scene>
   

5. (Optional) If you want to fit the 3D scene canvas into the entire screen, add the following CSS code:

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

6. (Optional) Customize the styles of your app.component by adding the following CSS code:

   atft-scene {
     display: block;
     width: 100%;
     height: 100%;
   }
   

Summary

The Angular Template For Three.js (atft) library provides a simple and convenient way for Angular developers to incorporate Three.js functionalities into their projects. By utilizing the provided components and following the installation steps, users can easily leverage the power of Three.js in their Angular apps. The library also includes a Storybook to allow for easy exploration and testing of the components in isolation. With the Angular Template For Three.js (atft) library, developers can create stunning 3D visualizations and interactive experiences within their Angular projects.