# ng2-3d-editor > Angular 2 3D Editor/viewer Latest version **0.0.18** (published 2017-10-21) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install ng2-3d-editor pnpm add ng2-3d-editor yarn add ng2-3d-editor bun add ng2-3d-editor ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.18 | | Published | 2017-10-21 | | First published | 2017-01-17 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 18 | | Known vulnerabilities | 0 (+22 in 4 direct dependencies) | | Install scripts | no | | GitHub stars | 18 | | Author | Eugenio Romano | | Maintainers | actarus16 | | Keywords | ng2, angular, angular2, viewer, 3d, three, javascript, obj, 3ds | ## Links - npm: https://www.npmjs.com/package/ng2-3d-editor - Repository: https://github.com/eromano/ng2-3d-editor - Homepage: https://github.com/eromano/ng2-3d-editor#readme - Issues: https://github.com/eromano/ng2-3d-editor/issues - npm.io page: https://npm.io/package/ng2-3d-editor ## Dependencies (18) - [rxjs](https://npm.io/package/rxjs.md) 5.0.0-beta.12 - [three](https://npm.io/package/three.md) 0.83.0 - [core-js](https://npm.io/package/core-js.md) 2.4.1 - [zone.js](https://npm.io/package/zone.js.md) 0.6.23 - [systemjs](https://npm.io/package/systemjs.md) 0.19.27 - [@types/three](https://npm.io/package/@types/three.md) 0.83.3 - [@angular/core](https://npm.io/package/@angular/core.md) 2.0.0 - [@angular/http](https://npm.io/package/@angular/http.md) 2.0.0 - [@angular/forms](https://npm.io/package/@angular/forms.md) 2.0.0 - [@angular/common](https://npm.io/package/@angular/common.md) 2.0.0 - [@angular/router](https://npm.io/package/@angular/router.md) 3.0.0 - [reflect-metadata](https://npm.io/package/reflect-metadata.md) 0.1.3 - [@angular/compiler](https://npm.io/package/@angular/compiler.md) 2.0.0 - [material-design-lite](https://npm.io/package/material-design-lite.md) 1.2.1 - [material-design-icons](https://npm.io/package/material-design-icons.md) 2.2.3 - [three-transformcontrols](https://npm.io/package/three-transformcontrols.md) 0.78.1 - [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) 2.0.0 - [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) 2.0.0 ## Recent versions - 0.0.18 (latest) — 2017-10-21 - 0.0.15 (beta) — 2017-02-15 - 0.0.17 — 2017-03-08 - 0.0.16 — 2017-02-15 - 0.0.14 — 2017-02-15 - 0.0.13 — 2017-02-15 - 0.0.12 — 2017-02-15 - 0.0.11 — 2017-02-15 - 0.0.10 — 2017-02-15 - 0.0.9 — 2017-02-05 - 0.0.8 — 2017-02-05 - 0.0.7 — 2017-02-05 - 0.0.6 — 2017-01-19 - 0.0.5 — 2017-01-17 - 0.0.4 — 2017-01-17 - … 3 more at https://npm.io/package/ng2-3d-editor/versions ## README # 3D File Editor Component for Angular 2 ![3D editor demo](assets/ScreenShot1.png) #### Install $ npm install --save ng2-3d-editor #### Basic usage ```html ``` [Live Demo](https://plnkr.co/edit/I4lIyA?p=preview) Example of an App that declares the file viewer component : ```ts import { Component, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { Editor3DModule } from 'ng2-3d-editor'; import { CommonModule } from '@angular/common'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; @Component({ selector: 'my-app', template: ` `, }) export class App { constructor() { console.log('start'); } } @NgModule({ imports: [ CommonModule, BrowserModule, Editor3DModule ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule {} platformBrowserDynamic().bootstrapModule(AppModule); ``` #### Options Attribute | Options | Default | Description | Mandatory --- | --- | --- | --- | --- `urlFile` | *string* | | Url 3D file to load | `initialPositionCamera` | *Object* | | If you want change the initial camera position pass an object ``` {x:xvalue , y:yvalue , z:zvalue}```| `initialRotationCamera` | *Object* | | If you want change the initial camera rotation pass an object ``` {x:xvalue , y:yvalue , z:zvalue}```| `clearColor` | *Hexadecimal color* | | Sets the clear color | `enableTransformController` | *Boolean* | true | enable transform command "W" translate ; "E" rotate ; "R" scale ; "+" increase size ; "-" decrease size; Press "Q" to toggle world/local space, keep "Ctrl" down to snap to grid | `extension` | *Boolean* | true | if you want force a certain extension reading type otherwise will be detected form the name file #### Supported file formats Type | extensions --- | --- 3D | OBJ 3D | FBX ## Build from sources Alternatively you can build component from sources with the following commands: ```sh npm install npm run build ``` ### Build the files and keep watching for changes ```sh $ npm run build:w ``` ## Running unit tests ```sh npm test ``` ### Running unit tests in browser ```sh npm test-browser ``` This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing. ### Code coverage ```sh npm run coverage ``` ## Demo If you want have a demo of how the component works, please check the demo folder : ```sh cd demo npm install npm start ``` ## NPM scripts | Command | Description | | --- | --- | | npm run build | Build component | | npm run build:w | Build component and keep watching the changes | | npm run test | Run unit tests in the console | | npm run test-browser | Run unit tests in the browser | npm run coverage | Run unit tests and display code coverage report | License: ng2-3d-editor is shared under the Apache Version 2.0. Please give this the Github repo a ⭐️ . --- _Source: https://npm.io/package/ng2-3d-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._