Three js in Ionic 2

Question

I'm building an Ionic 2 app, and I'm willing to use three.js with the OBJLoader.

The problem is that nothing is displayed at all, while the .obj is good (I tried 2 .obj), and the texture is also good, as I took them from https://threejs.org/examples/webgl_loader_obj.html (I used the code from this page too, but make it fit into the Typescript behavior)

Here is the result, the canvas is there but not the 3d model

:

I included the three.min.js and OBJLoader.js in my index.html, there is 0 errors excepted this due to the animate callback routine:

HomePage ionViewDidLoad error: Maximum call stack size exceede

The component code is as following :

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

declare var THREE : any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {


  container : any;
  camera : any;
  scene : any;
  renderer : any;
  mouseX : any;
  mouseY : any;
  windowHalfX : any;
  windowHalfY : any;

  constructor(public navCtrl: NavController) {

    this.mouseX = 0, this.mouseY = 0;
    this.windowHalfX = window.innerWidth / 2;
    this.windowHalfY = window.innerHeight / 2;

  }

  init() {
  this.container = document.createElement( 'div' );
  document.getElementById('fuckingcontainer').appendChild( this.container );
  this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
  this.camera.position.z = 250;
  //  this.scene
  this.scene = new THREE.Scene();
  var ambient = new THREE.AmbientLight( 0x101030 );
  this.scene.add( ambient );
  var directionalLight = new THREE.DirectionalLight( 0xffeedd );
  directionalLight.position.set( 0, 0, 1 );
  this.scene.add( directionalLight );
  // texture
  var manager = new THREE.LoadingManager();
  manager.onProgress = function ( item, loaded, total ) {
    console.log( item, loaded, total );
  };
  var texture = new THREE.Texture();
  var onProgress = function ( xhr ) {
    if ( xhr.lengthComputable ) {
      var percentComplete = xhr.loaded / xhr.total * 100;
      console.log( Math.round(percentComplete) + '% downloaded' );
    }
  };
  var onError = function ( xhr ) {
    console.log("ERROR");
  };
  var loader = new THREE.ImageLoader( manager );
  loader.load( 'UV_Grid_Sm.jpg', function ( image ) {
    console.log(texture);
    texture.image = image;
    texture.needsUpdate = true;
  } );
  // model
  var loader = new THREE.OBJLoader( manager );
  var that = this;

  loader.load( 'male02.obj', function ( object ) {
    object.traverse( function ( child ) {
      if ( child instanceof THREE.Mesh ) {
        child.material.map = texture;
        console.log(texture.image);
      }
    } );
    console.log(object);
    object.position.y = - 95; that.scene.add( object );
  }, onProgress, onError );
  //

  this.renderer = new THREE.WebGLRenderer();
  this.renderer.setPixelRatio( window.devicePixelRatio );
  this.renderer.setSize( window.innerWidth, window.innerHeight );
  this.container.appendChild( this.renderer.domElement );
  document.addEventListener( 'mousemove', function(event){
    that.mouseX = ( event.clientX - that.windowHalfX ) / 2;
    that.mouseY = ( event.clientY - that.windowHalfY ) / 2;
  }, false );
  //
  window.addEventListener( 'resize', function(event)
  {
    that.windowHalfX = window.innerWidth / 2;
    that.windowHalfY = window.innerHeight / 2;
    that.camera.aspect = window.innerWidth / window.innerHeight;
    that.camera.updateProjectionMatrix();
    that.renderer.setSize( window.innerWidth, window.innerHeight );
  }, false );}

  //
  animate(that) {
  requestAnimationFrame( that.animate(that) );
  that.render();}

  render() {
  this.camera.position.x += ( this.mouseX - this.camera.position.x ) * .05;
  this.camera.position.y += ( - this.mouseY - this.camera.position.y ) * .05;
  this.camera.lookAt( this.scene.position );
  this.renderer.render( this.scene, this.camera );
}


  ionViewDidLoad() {
  this.init();
  this.animate(this);
  }

}

Answer 1

You are doing a recursive call with no base case:

    animate(that) {
  requestAnimationFrame( that.animate(that) );
  that.render();}

Check this question for the reason of this error

Try

 animate(that) {
      requestAnimationFrame( that.animate );
      that.render();}