THREE.js webGL rendering works w "ionic serve", but not for iOS xcode build

@alejandrosklar wrote:

I’m building an app for iOS (must be built using xcode), that sets up and renders a webGL scene using THREE.js. Running with ionic serve everything works well in Chrome, and everything is rendered well when using DevApp on iphone 8plus running iOS 11.4. However, when I build using ionic cordova build ios --prod and then use xcode to install onto the same iPhone, the app just shows a blank white screen.

I’m using pretty much the latest version of everything:

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0
    cordova (Cordova CLI) : 8.0.0 
    @ionic/app-scripts : 3.1.10
    Cordova Platforms  : ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2
    Node  : v8.11.3
    npm   : 5.6.0 
    OS    : macOS High Sierra
    Xcode : Xcode 9.4.1 Build version 9F2000
    iOS: 11.4

I’ve installed the official three.js npm package, using the command npm i three, as well as three-orbit-controls and three-decal-geometry. The code is not doing anything too advanced, just importing JSON geometry, creating meshes from the geometry, applying a texture, and then rendering and providing camera control.

In my code, I load a directive that gets passed element reference of the parent, and appends the THREE.js renderer’s DOM element to the parent, as follows:

• in the directive:

       import { Directive, ElementRef, Input } from '@angular/core';
       ....other imports and requires....

       @Directive({ selector: 'cubeCanvas' })
       export class CubeCanvasDirective {
          
           ....members...

           constructor(el: ElementRef) {
               this.el = el;
               this.init()
           }

           init() {
               ...THREE setup (cameras, controls, scenes, etc)...
               this.renderer = new THREE.WebGLRenderer();
	           this.renderer.setSize(500,500);
	           this.el.nativeElement.appendChild(this.renderer.domElement);
	           this.render();
           }

           render = () => {
               ...basic updates to controls and light....
               this.renderer.render(this.scene,this.camera);
		       requestAnimationFrame(this.render);
           }
       }

• in page’s typescript file:

    import { Component, ViewChild } from '@angular/core';
    ...other imports and requires...

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

      @ViewChild(CubeCanvasDirective) vc:CubeCanvasDirective;
      ...other members...

      constructor(public navCtrl: NavController, 
                  public navParams: NavParams,
                  public cubeStateProvider: CubeStateProvider) { 
      }
    }

   ...now I can call directive's functions using this.vc.directiveFunctionName()...    

• I then insert the directive into page’s html using <cubeCanvas></cubeCanvas>

Am I attaching the renderer to the DOM incorrectly? Is there something wrong with the packages I’m using? Any other ideas on what could be going wrong?

Posts: 1

Participants: 1

Read full topic