Thanks for the response. 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
For webGL, 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. But 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:
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>
Running with ionic serve everything works well in Chrome, and everything is rendered well when using DevApp on iphone 8plus running iOS 11.4 (although the app hangs when one of the directive’s functions is called…but that may be something else). However, when I build using ionic cordova build ios --prod and then use xcode to install on the iphone with iOS 11.4, the app just shows a blank white screen.
Am I attaching the renderer to the DOM incorrectly? Is there something wrong with the packages I’m using? Other ideas?
