Collada integration with Angular using Three.js

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.

Answer №1

THREE.ColladaLoader is actually located in a separate folder within the three.js library, specifically in the examples/js/loaders directory. A recent discussion on GitHub highlighted that currently, importing these loaders as ES6 modules is not supported. To work around this limitation, you will need to manually copy the ColladaLoader.js file into your project and adjust the import and export statements:

import * as THREE from 'three';

var ColladaLoader = function () { ... }

export ColladaLoader;

If using WebPack with CommonJS configuration, you can also make use of CommonJS imports instead. Here's an example:

const THREE = require('three');
require('three/examples/js/loaders/ColladaLoader');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Heroku: deployment unsuccessful

Currently, I am encountering a problem with Heroku: my build is failing without any explanation provided. Previously, I had no issues deploying. Even on my local machine, deployment was smooth. However, on my Heroku application, the build process halts a ...

Nuxt encountered an issue with Vue hydration: "Tried to hydrate existing markup, but the container is empty. Resorting to full mount instead."

I'm facing an issue while trying to integrate SSR into my project. I keep encountering this error/warning. How can I pinpoint the problem in my code? There are numerous components in my project, so I'm unsure if I should share all of my code, b ...

Unexpected output from nested loop implementation

Having some arrays, I am now trying to iterate through all tab names and exclude the values present in the exclusion list. json1 ={ "sku Brand": "abc", "strngth": "ALL", "area ...

What is the procedure to prevent Angular CLI from including a specific typings file in my project configuration?

I've integrated JointJs into my Angular CLI project, but I'm encountering typing errors during the build process: https://i.sstatic.net/3ihS3.png The error messages point to the file node_modules/jointjs/types/joinjs.d.ts, which is not the corr ...

Setting up gulp-typescript for Angular 2: A comprehensive guide

Right now I am utilizing the tsc compiler with the watch flag in the command prompt. It functions correctly, loading all definition files and successfully compiling each angular2 file. However, it is quite cumbersome to use via the shell window. My object ...

Display dates in Angular with specific Timezone settings

I have a challenge where I am receiving dates in UTC format from my API and I need to display them using the user's local timezone, which is obtained from another API. While I was able to successfully handle time zones with a positive offset (e.g. +10 ...

Exploring the representation of recursive types using generic type constraints

Is there a way to create a structure that can handle recursive relationships like the one described below? I am looking to limit the types of values that can be added to a general container to either primitive data types or other containers. Due to limit ...

Associate the generic operator <T> with a FunctionConstructor

In my TS function, I deserialize JSON into a specific type/object by providing it with a constructor function of that type which reconstructs the object from JSON. Here is how it looks like: export function deserializeJSON<T>(JSONString: string, ty ...

Encountering issues with npm install @angular/material for installing angular2 material package

Attempting to install angular2 material using the command npm install @angular/material: [xxx@Latitude-E5550 quickstart]$ npm install @angular/material [email protected] /home/xxx/quickstart └── @angular/[email protected] npm ...

Filling in placeholder information for HTTP posting during development

I found a way to retrieve data from an endpoint fetchManufacturersData(): Observable<Manufacturers> { const requestBody = { 'num': 12 }; return this.http.post<Manufacturers>(manufacturersUrl, requestBody).pipe( catch ...

The <a> tag does not lead to a different webpage and cannot be clicked on

I have developed a web component that includes a method to generate a copyright string: '<p>Copyright © 2020 John Doe<a href="https://www.example.com">. Terms of Use</a></p>' After creating the string, I conver ...

Exploring the Power of Asynchronous Operations with Await and Async in

I have a basic understanding of how to use await/async in Angular 2 with the following example: async getValueWithAsync() { const value = <number>await this.resolveAfter2Seconds(20); console.log(`async result: ${value}`); } In my Angular ...

Trouble viewing Three.js content in Index.html

My current project involves building a website using three.js with typescript. However, I am facing an issue where only the header from my index.html file is displayed when I try to load the website onto a local server. The main problem arises when I atte ...

The abbreviation 'ng' is not identified as a command that can be run internally or externally, nor is it an operative program or batch file - Angular

The error message 'ng' is not recognized as an internal or external command, operable program or batch file, appears when attempting to run ng serve. Despite running npm audit fix --force, the error persists. Running ng serve results in the abov ...

Using an angular 4 static method with a non-static object as an argument

Currently, I am working on an Angular 4 application and facing an issue while trying to pass the current language to the toLocaleString() method. The mathRound method is static, which makes it difficult to understand this.translation.currentLang. How can ...

Setting the default value in the Angular input select

books.component.ts export class BooksComponent implements OnInit { public sortOrder; ... books.component.html <div class="form-group"> <label for="selectOrder">Sort</label> <select class="form ...

Encountering an issue with Angular virtual scrolling: ViewDestroyedError arises when trying to utilize a destroyed view during detectChanges operation

My implementation involves using virtual scrolling from the cdk within a trigger-opening sidenav on a mat-radio element. Here is the code snippet: ts - ... @Component({ selector: 'app-generic-options-list', templateUrl: './generic-opt ...

Troubleshooting issue with alignment in Material UI using Typescript

<Grid item xs={12} align="center"> is causing an issue for me No overload matches this call. Overload 1 of 2, '(props: { component: ElementType<any>; } & Partial<Record<Breakpoint, boolean | GridSize>> & { ...

Button in Angular gets stuck when a touchscreen is long pressed

In my Angular2 application, I am facing an issue with a button when running on a Windows 10 touchscreen PC in Chrome. Normally, the button works fine and executes the click function. However, if the button is held for 1-2 seconds, it gets stuck and fails t ...

Erase Typescript Service

To remove a PostOffice from the array based on its ID, you can use a checkbox to select the desired element and then utilize its ID for the delete function. Here is an example: let postOffices = [ {postOfficeID: 15, postCode: '3006&ap ...