makimenko / angular-three-examples

Angular5 + three.js + Three.js examples/js (ColladaLoader and OrbitControls)

AngularThreeExamples

Angular5 + three.js + Three.js examples/js (ColladaLoader and OrbitControls)

Demo

See DEMO

Installation

git clone https://github.com/makimenko/angular-three-examples.git
cd angular-three-examples
npm install
ng serve

Angular 7

Development switched to angular-template-for-threejs repository.

Angular 4

Previous version of Angular4 see in tag: ng4

angular-three-examples's Issues

Ng5 Migration

Hey @makimenko :)
This isn't an actual issue or anything with your example, more of a query:

Was just wondering if this example of yours would work the same if a migration to Angular 5 was done?

I was using something similar, by setting the TS compiler allowJS=true, and using a seperate JS file to load the ThreeJS library, bit since the migration on my project this doesn't exactly work as it used to with Ng4 👎

Cheers!

Warning message when building for production

When building the application for production, I get the following warning.
How to get rid of this warning?

D:\angular-three-examples-master>ng build --prod

Date: 2018-01-30T09:27:38.945Z
Hash: 852fc05be81b829cb151
Time: 39138ms
chunk {0} polyfills.12c8097dc1606bc2ea5e.bundle.js (polyfills) 98.2 kB [initial] [rendered]
chunk {1} main.5bf78b443b4f685ee5f0.bundle.js (main) 727 kB [initial] [rendered]
chunk {2} styles.9c0ad738f18adc3d19ed.bundle.css (styles) 79 bytes [initial] [rendered]
chunk {3} inline.30555f13863256f8cb92.bundle.js (inline) 1.45 kB [entry] [rendered]

WARNING in ./src/app/scene/scene.component.ts
24:25-44 "export 'ColladaLoader' (imported as 'THREE') was not found in 'three'
    at HarmonyImportSpecifierDependency._getErrors (D:\angular-three-examples-master\node_modules\webpack\lib\dependenci
es\HarmonyImportSpecifierDependency.js:65:15)
    at HarmonyImportSpecifierDependency.getWarnings (D:\angular-three-examples-master\node_modules\webpack\lib\dependenc
ies\HarmonyImportSpecifierDependency.js:39:15)
    at Compilation.reportDependencyErrorsAndWarnings (D:\angular-three-examples-master\node_modules\webpack\lib\Compilat
ion.js:703:24)
    at Compilation.finish (D:\angular-three-examples-master\node_modules\webpack\lib\Compilation.js:561:9)
    at applyPluginsParallel.err (D:\angular-three-examples-master\node_modules\webpack\lib\Compiler.js:502:17)
    at D:\angular-three-examples-master\node_modules\tapable\lib\Tapable.js:289:11
    at _addModuleChain (D:\angular-three-examples-master\node_modules\webpack\lib\Compilation.js:507:11)
    at processModuleDependencies.err (D:\angular-three-examples-master\node_modules\webpack\lib\Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./src/app/scene/scene.component.ts
 @ ./src/app/app.component.ngfactory.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/main.ts
 @ multi ./src/main.ts

WARNING in ./src/app/scene/scene.component.ts
76:28-47 "export 'OrbitControls' (imported as 'THREE') was not found in 'three'
    at HarmonyImportSpecifierDependency._getErrors (D:\angular-three-examples-master\node_modules\webpack\lib\dependenci
es\HarmonyImportSpecifierDependency.js:65:15)
    at HarmonyImportSpecifierDependency.getWarnings (D:\angular-three-examples-master\node_modules\webpack\lib\dependenc
ies\HarmonyImportSpecifierDependency.js:39:15)
    at Compilation.reportDependencyErrorsAndWarnings (D:\angular-three-examples-master\node_modules\webpack\lib\Compilat
ion.js:703:24)
    at Compilation.finish (D:\angular-three-examples-master\node_modules\webpack\lib\Compilation.js:561:9)
    at applyPluginsParallel.err (D:\angular-three-examples-master\node_modules\webpack\lib\Compiler.js:502:17)
    at D:\angular-three-examples-master\node_modules\tapable\lib\Tapable.js:289:11
    at _addModuleChain (D:\angular-three-examples-master\node_modules\webpack\lib\Compilation.js:507:11)
    at processModuleDependencies.err (D:\angular-three-examples-master\node_modules\webpack\lib\Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./src/app/scene/scene.component.ts
 @ ./src/app/app.component.ngfactory.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/main.ts
 @ multi ./src/main.ts