您如何将 Three.js 代码实现到 Android 移动应用程序中?

本文介绍了您如何将 Three.js 代码实现到 Android 移动应用程序中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我用 HTML、CSS 和 JS 编写了用于 Three.js 场景的代码，其中显示了 3D 头部模型和标记.它适用于我的 Angular 项目.

I have code written in HTML, CSS and JS for a Three.js scene showing a 3D headmodel and marks on it. It works on my Angular project.

我还能够通过将 HTML 代码添加到 web 视图中，使其在适用于 Android 和 iOS 的 Xamarin Forms 项目中工作.

I was also able to get it to work in my Xamarin Forms project for both Android and iOS by just adding the HTML code into a webview.

但是，当我尝试在 web 视图中的 Android 本机应用程序中执行相同操作时，它不起作用.

However, when I try to do the same in an Android native app in a webview, it does not work.

这是我正在尝试的；

// 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 信息

Here is the logcat info once I loaded the relevant layout

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

推荐答案

我能够将 THREE.js 场景完全加载到 Android 网页视图中.方法如下.

I was able to get a THREE.js scene fully loaded into an Android webview. Here is how.

在我的活动的 onCreate 方法中；

In the onCreate method of my activity;

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

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

I needed to add more settings and allow access to the specific files referenced in my Javascript files that were linked in my HTML string.

这个答案对此有很大帮助 XMLHttpRequest 不能从模拟器上的android资产文件夹加载文件

Big help for that from this answer 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# 中不同的方式传入我的变量.我在这里找到了帮助.如何在 Java 中格式化字符串

I then needed to pass in my variables differently in Java than in C#. I found that help here.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().

Lastly, I switched from loadData() to loadDataWithBaseUrl().

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

这篇关于您如何将 Three.js 代码实现到 Android 移动应用程序中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！