ng2-3d-editor

3D File Editor Component for Angular 2

Install

$ npm install --save ng2-3d-editor

Basic usage

<threed-viewer [urlFile]="'filename.obj'"></threed-viewer>

Live Demo

Example of an App that declares the file viewer component :

 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: `
      <threed-viewer [urlFile]="'https://cdn.rawgit.com/eromano/ng2-3d-editor/master/examples/obj/car/car.obj'" ></threed-viewer>
   `,
 })
 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:

npm install
npm run build

Build the files and keep watching for changes

$ npm run build:w

Running unit tests

npm test

Running unit tests in browser

npm test-browser

This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing.

Code coverage

npm run coverage

Demo

If you want have a demo of how the component works, please check the demo folder :

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 ⭐️ .