ThreeJS scene editor.
ThreeJS has a Scene Editor, but this editor is JavaScript based and difficult to extend. This project is to create Angular based alternative.
Edit on StackBlitz ⚡️
Angular documentation
This project was generated with Angular CLI version 8.3.8.
Project options: routing and SCSS as a style sheet.
Stable version 1.0 released. It covers significant part of editing for ThreeJS lights and materials. Viewing GLTF, Collada and STL files. Editing lights and materials for imported files. Retrieving materials from the loaded GLTF and Collada files. Saving and loading lights and materials to reuse in other projects. Exporting scene in GLTF format.
Release build can be found on main branch in the builds\Releases folder.
Unzip release build archive into folder on the web server and call index.html file. Due to security limitations of the web browsers the build can be run only from the web server. Running build from the local computer will cause script loading failures.
Implementation of constructive geometry creation and editing.
Working version at scene.meercad.com
Partial help is available at help.meercad.com. This is a work in progress.
This project is not finished. Detailed documentation will be added later. It is possible right now to drop GLTF/GLB (file or folder), STL or saved three.js scene file into graphics area on the left and try using controls.
The image is made from the GLTF model loaded into SceneEditor. The model can be found on NASA Ingenuity page. After loading model will look dark due to darker materials. Lights intensity should be increased in the Light Editor
These modules should be added on top of the standard angular installation (npm install should do it for you)
npm install angular-split Documentation
npm install three Documentation
npm install angular-resize-event Documentation
ng add @angular/material Documentation, accept HammerJS option for the jesture recognition, accept browser animations.
npm install file-saver Documentation
npm install ngx-color-picker Documentation
npm install angular-in-memory-web-api Documentation - web server simulation for the testing
npm install uuid Documentation
npm install ngx-file-drop Documentation
npm install --save-dev @types/three Documentation
npm install ngx-spinner --save Documentation - loading spinner.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.