# app3d-three-template
> An easy implementation of a 3d scene with Three.js and Angular, where you can add and move objects easily in the scene.
Latest version **0.0.45** (published 2020-04-22) · MIT license · 0 weekly downloads
## Install
```sh
npm install app3d-three-template
pnpm add app3d-three-template
yarn add app3d-three-template
bun add app3d-three-template
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.45 |
| Published | 2020-04-22 |
| First published | 2020-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 6.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | David Martínez Ros |
| Maintainers | davidmartinezros.com, esmareldavillalobos, igres_28, triplej |
| Keywords | angular, javascript, typescript, template, three.js, three, 3d, component, scene, scenes for dummies, 3d for dummies, three.js for dummies, app-3d-three-template, app3d-three-template |
## Links
- npm: https://www.npmjs.com/package/app3d-three-template
- Repository: https://github.com/davidmartinezros/app-3d-three-template
- Homepage: https://github.com/davidmartinezros/app-3d-three-template#readme
- Issues: https://github.com/davidmartinezros/app-3d-three-template/issues
- npm.io page: https://npm.io/package/app3d-three-template
## Dependencies (5)
- [rxjs](https://npm.io/package/rxjs.md) *
- [three](https://npm.io/package/three.md) *
- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [@types/webgl2](https://npm.io/package/@types/webgl2.md) *
- [@types/offscreencanvas](https://npm.io/package/@types/offscreencanvas.md) *
## Alternatives
- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads
## Recent versions
- 0.0.45 (latest) — 2020-04-22
- 0.0.44 — 2020-04-22
- 0.0.43 — 2020-04-01
- 0.0.42 — 2020-03-27
- 0.0.41 — 2020-03-27
- 0.0.40 — 2020-03-19
- 0.0.39 — 2020-03-19
- 0.0.38 — 2020-03-19
- 0.0.37 — 2020-03-19
- 0.0.36 — 2020-03-10
- 0.0.35 — 2020-02-29
- 0.0.34 — 2020-02-29
- 0.0.33 — 2020-02-29
- 0.0.32 — 2020-02-29
- 0.0.31 — 2020-02-29
- … 30 more at https://npm.io/package/app3d-three-template/versions
## README
# DESCRIPTION
The component makes it easy the work to representing 3D scenes in the browser with the Three.js library.
## use three.js in an easy way with app3d-three-template
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) and is designed as a basic template for [ThreeJS](https://threejs.org/) combined with [Angular](https://angular.io/).
You can find me at https://davidmartinezros.com or contact in the email davidnezan@gmail.com
## youtube video
https://youtu.be/Hz9Wz00X554
## demo using the component
https://davidmartinezros.github.io/3dThreeTemplateDemo/
## how to create a three.js project
You have to import the three.js library and types needed into your project.
```
npm i three --save
npm i @types/webgl2 --save
npm i @types/offscreencanvas --save
```
Add the three.js file to your project in the angular.json file.
```
"scripts": [
"node_modules/three/build/three.min.js"
],
```
Add webgl2 and offscreencanvas as types in your tsconfig.app.json file or tsconfig.json file, **for RECOGNISE** them.
```
"compilerOptions": {
"types": [
"webgl2"
"offscreencanvas"
]
},
```
# how to use this component
You can use it as a component in your project adding the tag in your AppComponent, add the module App3dThreeTemplateModule and define your provider MyRenderService extending the abstract service RenderService.
Like this:
```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { App3dThreeTemplateModule, RenderService } from 'app3d-three-template';
import { AppComponent } from './app.component';
import { MyRenderService } from './my-service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
App3dThreeTemplateModule
],
providers: [
{ provide: RenderService, useClass: MyRenderService }
],
bootstrap: [
AppComponent
]
})
export class AppModule { }
```
Then, you can reimplement extending the abstract service RenderService and implementing the methods createObjects() and renderObjects().
Like this:
```
import * as THREE from 'three';
import { Injectable } from '@angular/core';
import { RenderService } from 'app3d-three-template';
@Injectable({
providedIn: 'root'
})
export class MyRenderService implements RenderService {
private axesHelper: THREE.AxesHelper;
//implement for create objects in scene
createObjects(scene: THREE.Scene, renderer: THREE.WebGLRenderer, canvas: HTMLCanvasElement, camera: THREE.PerspectiveCamera, light: THREE.AmbientLight) {
this.axesHelper = new THREE.AxesHelper( 200 );
scene.add( this.axesHelper );
camera.lookAt(0,0,0);
}
//implement for render animation of objects
renderObjects(scene: THREE.Scene, renderer: THREE.WebGLRenderer, canvas: HTMLCanvasElement, camera: THREE.PerspectiveCamera, light: THREE.AmbientLight) {
this.axesHelper.rotateX(0.01);
}
}
```
Call the component into the html of the AppComponent:
```
```
## Demo Example
This intro is done with this three.js and the component app3d-three-template.
https://davidmartinezros.com
---
_Source: https://npm.io/package/app3d-three-template · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._