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?