Requesting assistance to develop a webapp using Angular4 with THREEjs for viewing Collada Objects, but encountering challenges.
UPDATE: Seeking a working example or helpful hints as efforts in researching and exploring code with other loaders have proven futile.
Here is the typescript code related to the component:
import { Component, OnInit,ViewChild, ElementRef } from '@angular/core';
import { GlobalVarService} from '../global-var.service';
import * as THREE from 'three';
import {ColladaLoader} from 'three';
@Component({
selector: 'app-game',
templateUrl: './game.component.html',
styleUrls: ['./game.component.css'],
providers: [ ]
})
/*
*/
export class GameComponent implements OnInit {
@ViewChild('rendererContainer') rendererContainer: ElementRef;
renderer = new THREE.WebGLRenderer();
scene = null;
camera = null;
mesh = null;
clock=null;
constructor() {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
this.camera.position.set( 8, 10, 8 );
this.camera.lookAt( new THREE.Vector3( 0, 3, 0 ) );
this.scene = new THREE.Scene();
this.clock = new THREE.Clock();
// loading manager
var loadingManager = new THREE.LoadingManager( function() {
this.scene.add( self );
} );
// collada
var loader = new ColladaLoader( );//THREE.ColladaLoader() gives the same error
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
this.scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
directionalLight.position.set( 1, 1, 0 ).normalize();
this.scene.add( directionalLight );
this.renderer = new THREE.WebGLRenderer();
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.setSize( window.innerWidth, window.innerHeight );
this.mesh = new THREE.Mesh();
this.scene.add(this.mesh);
}
ngOnInit() {
}
ngAfterViewInit() {
this.renderer.setSize(600, 400);
this.renderer.domElement.style.display = "block";
this.renderer.domElement.style.margin = "auto";
this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);
this.animate();
}
animate() {
window.requestAnimationFrame(() => this.animate());
this.mesh.rotation.x += 0.01;
this.mesh.rotation.y += 0.02;
this.renderer.render(this.scene, this.camera);
}
}
During compilation, the following warning message is received:
WARNING in ./src/app/game/game.component.ts 44:25-38 "export 'ColladaLoader' was not found in 'three' webpack: Compiled with warnings.
Upon opening the Webapp, the error encountered is:
ERROR Error: [object Object] Stack trace: resolvePromise@http://localhost:4200/polyfills.bundle.js:3198:31 resolvePromise@http://localhost:4200/polyfills.bundle.js:3169:17 scheduleResolveOrReject/<@http://localhost:4200/polyfills.bundle.js:3246:17 ../../../../zone.js/dist/zone.js/http://localhost:4200 /polyfills.bundle.js:2839:17 onInvokeTask@http://localhost:4200/vendor.bundle.js:111709:24 ../../../../zone.js/dist/zone.js/http://localhost:4200/polyfills.bundle.js:2838:17 ../../../../zone.js/dist/zone.js/http://localhost:4200/polyfills.bundle.js:2606:28 drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:3010:25 core.es5.js:1020 ReferenceError: THREE is not defined
Your help is greatly appreciated.