个人中心
gpt4 book ai didi

android - 如何将 Three.js 代码实现到 Android 移动应用程序中？

转载 作者：行者123 更新时间：2023-12-04 16:05:06 30 4
gpt4 key购买 nike

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

我还能够通过将 HTML 代码添加到 webview 中，让它在我的 Android 和 iOS Xamarin Forms 项目中工作。

但是，当我尝试在 Web View 中的 Android native 应用程序中执行相同操作时，它不起作用。

这是我正在尝试的；

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

最佳答案

我能够将 THREE.js 场景完全加载到 Android webview 中。方法如下。

在我的 Activity 的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 代码实现到 Android 移动应用程序中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49136748/

30 4 0
文章推荐： typescript - 使用 TypeScript 将箭头函数分配给通用函数类型
文章推荐： domain-driven-design - 如何在事件驱动架构中控制消息的幂等性？
文章推荐： python-2.7 - tensorflow 中不理解的数据类型
文章推荐： spring - oauth/token 访问此资源需要完整的身份验证
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com