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

Ionic Framework ionic-v3
2

An update, for any interested parties:

I have found at least one issue with a certain THREE.js package and one ionic related issue (specifically when using on iOS). However, none of the issues are with the code I included above, and the issue is not related to the official THREE.js core library port to npm. This is what was causing my issues:

  1. The scene was not rendering because filepath to the assets folder are slightly different when built for iOS instead of run with ionic serve. See this THIS THREAD for details.

  2. For some reason, three-orbitcontrols package (which has been recently updated and claims to be from the official repo), causes the webGL scene to steal context from ionic UI or something (I’m sure my terminology is way off). Basically, when any scene that uses that package to include OrbitControls in the scene, ionic components stop working (buttons, menus, etc). However, using the same exact code with three-orbit-controls package (literally a direct drop in replacement), solves all the issues and provides the desired OrbitControls. The issues did not show up when accessing ionic served page on PC, but it did anytime using iOS. I only tested with iPhone running iOS 11.4, but the issue is there regardless of if you use Devapp, iOS chrome browser, or if built with ionic cordova build ios.

3 Likes