Question

我有用HTML，CSS和JS编写的代码，用于Three.js场景，显示3D头模和标记。它适用于我的Angular项目。

我还可以通过将HTML代码添加到webview中，在Android和iOS的Xamarin Forms项目中使用它。

但是，当我尝试在webview中的Android原生应用中执行相同操作时，它不起作用。

这是我正在尝试的;

// get the reference from the XML Layout
final WebView wv = (WebView) findViewById(R.id.web_view_impact_detail);

/*
   WebSettings
   Manages settings state for a WebView. When a
   WebView is first created, it obtains a set
   of default settings.

   setJavaScriptEnabled(boolean flag)
   Tells the WebView to enable JavaScript execution.
*/
wv.getSettings().setJavaScriptEnabled(true);

String htmlData = "<html lang = 'en'><head> <meta name='viewport' content='width=device-width, height=device-height initial-scale=1'> <script src='three.min.js'></script> <script src='OBJLoader.js'></script> <script src='OrbitControls.js'></script> <script src='GeometryUtils.js'></script> <script src='CanvasRenderer.js'></script> <script src='DecalGeometry.js'></script> </head> <body> <label hidden id='x' value='-0.712'></label> <label hidden id='y' value='0.539'></label> <label hidden id='z' value='-0.448'></label> <label hidden id='alert' value='false'></label> <h4>Hello World</h4><script src='3d-head-mobile.js'></script> </body> </html> ";

wv.loadData(htmlData, "text/html; charset=utf-8", "UTF-8");

加载相关布局后，这是logcat信息

03-06 22:03:10.870 20385-20385/com. W/FA: Service connection failed: ConnectionResult{statusCode=SERVICE_VERSION_UPDATE_REQUIRED, resolution=null, message=null}
03-06 22:03:10.871 20385-20409/com. V/FA: Processing queued up service tasks: 0
03-06 22:03:10.883 20385-20385/com. W/chromium: [WARNING:ipc_message_attachment_set.cc(49)] MessageAttachmentSet destroyed with unconsumed attachments: 0/1
03-06 22:03:10.883 20385-20385/com. W/zygote: Attempt to remove non-JNI local reference, dumping thread
03-06 22:03:10.886 20385-20418/com. D/EGL_emulation: eglMakeCurrent: 0xdd205480: ver 3 0 (tinfo 0xdd203460)
03-06 22:03:10.942 20385-20441/com.aW/cr_CrashFileManager: /data/user/0/com./cache/WebView/Crash Reports does not exist or is not a directory
03-06 22:03:11.828 20385-20556/com.D/EGL_emulation: eglCreateContext: 0xc1b710e0: maj 3 min 0 rcv 3
03-06 22:03:11.840 20385-20556/com. D/EGL_emulation: eglMakeCurrent: 0xc1b710e0: ver 3 0 (tinfo 0xc8b58cc0)
03-06 22:03:11.924 20385-20556/com.I/VideoCapabilities: Unsupported profile 4 for video/mp4v-es
03-06 22:03:11.928 20385-20556/com.W/cr_MediaCodecUtil: HW encoder for video/avc is not available on this device.
03-06 22:03:11.952 20385-20556/com.D/EGL_emulation: eglCreateContext: 0xc1b71f20: maj 3 min 0 rcv 3
03-06 22:03:11.962 20385-20556/com.D/EGL_emulation: eglMakeCurrent: 0xc1b71f20: ver 3 0 (tinfo 0xc8b58cc0)
03-06 22:03:12.155 20385-20385/com.W/zygote: Attempt to remove non-JNI local reference, dumping thread
03-06 22:03:12.190 20385-20385/com.W/zygote: Attempt to remove non-JNI local reference, dumping thread
03-06 22:03:12.392 20385-20385/com.W/zygote: Attempt to remove non-JNI local reference, dumping thread
03-06 22:03:12.487 20385-20385/com.I/chatty: uid=10080(com.) identical 3 lines
03-06 22:03:12.515 20385-20385/com.W/zygote: Attempt to remove non-JNI local reference, dumping thread
03-06 22:03:12.895 20385-20385/com.W/zygote: Attempt to remove non-JNI local reference, dumping thread

Answer 1

您没有正确使用WebViewClient。删除此行：

wv.setWebViewClient(new WebViewClient());

或者创建一个WebViewClient子类，并使用以下内容覆盖shouldOverrideUrlLoading：

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    view.loadUrl(url);
    return true;
}

Answer 2

我能够将一个THREE.js场景完全加载到Android webview中。这是如何。

在我的活动的onCreate方法中;

    // get the reference from the XML Layout
    final WebView wv = (WebView) findViewById(R.id.web_view_impact_detail);

我需要添加更多设置，并允许访问我的HTML字符串中链接的Javascript文件中引用的特定文件。

从这个答案XMLHttpRequest cannot load file from android asset folder on emulator

获得了很大的帮助

    /*
        WebSettings
            Manages settings state for a WebView. When a
            WebView is first created, it obtains a set
            of default settings.

        setJavaScriptEnabled(boolean flag)
            Tells the WebView to enable JavaScript execution.
            etc.
     */
    wv.getSettings().setJavaScriptEnabled(true);
    wv.getSettings().setPluginState(WebSettings.PluginState.ON);
    wv.getSettings().setAllowFileAccess(true);
    wv.getSettings().setAllowContentAccess(true);
    wv.getSettings().setAllowFileAccessFromFileURLs(true);
    wv.getSettings().setAllowUniversalAccessFromFileURLs(true);

然后我需要在Java中以不同于C＃的方式传递我的变量。我在这里找到了帮助。 How to format strings in Java

    // create a string of our HTML data
    String htmlData = "<html lang = 'en'><head> <meta name='viewport' content='width=device-width, height=device-height initial-scale=1'> <script src='three.min.js'></script> <script src='OBJLoader.js'></script> <script src='OrbitControls.js'></script> <script src='GeometryUtils.js'></script> <script src='CanvasRenderer.js'></script> <script src='DecalGeometry.js'></script> </head> <body> <label hidden id='x' value='%1$f'></label> <label hidden id='y' value='%2$f'></label> <label hidden id='z' value='%3$f'></label> <label hidden id='alert' value='%4$s'></label> <script src='3d-head-mobile.js'></script> </body> </html> ";

    // format the HTML string to include our variables
    htmlData = String.format(htmlData,
            passedImpactMobile.getImpactDirection().getX(),
            passedImpactMobile.getImpactDirection().getY(),
            passedImpactMobile.getImpactDirection().getZ(),
            passedImpactMobile.getAlert()
    );

最后，我从loadData（）切换到loadDataWithBaseUrl（）。

    wv.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "utf-8", null);

如何在Android移动应用程序中实现Three.js代码？

2 个答案: