Sunday 12 January 2020

ES6 Import inside of Android Webview - not a constructor error

I am rendering an html webpage inside of a WebView which uses three.js to render a 3D model. Thus far all of that is working fine. I am now attempting to add touch/drag controls to move the camera around. I found some example code to make this work and I've implemented it. Here are the relevant portions code:

import * as tc from './TrackballControls.js';
//....
controls = new tc.TrackballControls( camera , renderer.domElement);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;

On PC in Crome and Firefox everything works perfectly, my model renders and dragging does change the camera view. In Chrome and Firefox on my Android device loading the page via local network everything also works fine.

However in the WebView within my application I am getting this error:

Uncaught TypeError: tc.TrackballControls is not a constructor

It seems that creating the TrackballControls object is failing. Why does it fail in this way inside of the WebView and not in Chrome on the same phone?

This is my html app directory structure:

enter image description here

I have edited three.module.js and TrackballControls.js to account for them being in the same directory like this:

// in index.html js:
import * as THREE from './three.module.js';
import * as tc from './TrackballControls.js';    

// in TrackballControls.js:
import {
  EventDispatcher,
  MOUSE,
  Quaternion,
  Vector2,
  Vector3
} from "./three.module.js";

Is there anything I can alter in the html/javascript or Android java code to make it work correctly inside the WebView?

I have tried on 2 different devices, their webview userAgent strings are:

"Mozilla/5.0 (Linux; Android 6.0.1; S60 Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/79.0.3945.93 Mobile Safari/537.36", source: https://appassets.androidplatform.net/assets/www/cpb_3d_model_wgt/index.html (27)

and

"Mozilla/5.0 (Linux; Android 8.1.0; LM-V405 Build/OPM1.171019.026; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/79.0.3945.93 Mobile Safari/537.36", source: https://appassets.androidplatform.net/assets/www/cpb_3d_model_wgt/index.html (27)


from ES6 Import inside of Android Webview - not a constructor error

No comments:

Post a Comment