web端的项目，three.js项目打包APK，安卓环境安装

原创已于 2024-04-09 16:45:54 修改 · 2.9k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #安卓

于 2023-11-27 17:32:23 首次发布

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Hbuilder和AndroidStudio将纯原生且无框架的three.js项目打包成APK，对比了两者在打包速度、调试便利性和环境配置上的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

three.js项目和web端的项目打包成APK，有两种工具，Hbuilder和Android Studio。

这个教程使用于纯原生的，没有使用任何框架，有架构的我没试过，有需求的小伙伴可以一试

Hbuilder简单易操作但是每天打包的次数有限制，而且每次都需要等很长时间（大约不到10分钟吧），不方便调试。

Android Studio方式打包超级迅速，不到几秒钟，嘎嘎快，方便调试。

如果对整环境头疼需求还不那么高的小伙伴就选Hbuilder打包。Android Studio方式打包虽然好用但是整安卓环境特别头疼，不用担心，博主已经踩过一边坑了，跟着我整就对了。用安卓方式的一定要下载我的安装包，装在我指定的路径中就肯定没有问题。

第一种：Hbuilder打包

嘿嘿嘿，刚刚我发现我太久没用hbuilder不小心给删除了，大家就参考这个大佬的文章吧

使用HbuilderX将web项目打包成安卓安装包_hbuilder打包web-CSDN博客

第二种： android打包

jdk环境下载

链接：https://pan.baidu.com/s/1UZlEhyAaBevPQRk8mRWtpQ
提取码：qdvp

1.直接双击下一步，不要修改路径，傻瓜式安装即可

2.Win+R,输入cmd回车，在控制台输入 java -version 命令出现如下，就安装成功

3.如果没有出现，显示不是内部命令参加这个教程配置环境变量即可

JDK 安装与环境变量配置(Win10详细版)_jdk环境变量配置-CSDN博客

安卓环境下载

链接：https://pan.baidu.com/s/1FYc8cC24Up3qTvYZmRMlOg
提取码：al7f

1.这三个文件放到C盘你当前的用户文件夹下

如图

2.剩下两个放到D盘的Android的文件夹下，解压到当前文件夹即可，如图

有的文件特别大，解压很长时间，需要耐心等待

3.解压完后，点击如下就可以打开使用了，为了方便以后使用，可以创建快捷方式到桌面

4.新建一个工程，参考教程如下

Android创建项目_android新建项目-CSDN博客

5，新建一个assets文件夹，将自己的项目拷进去

6,点击layout->activity_main.xml,填上圈出来的代码

 <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/mWebView">
    </WebView>

7，如下文件下添上圈出来的代码

  mWebView=findViewById(R.id.mWebView);

        //声明WebSettings子类
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setAllowFileAccess(true); //设置可以访问文件
        webSettings.setAllowFileAccessFromFileURLs(true);
        webSettings.setAllowUniversalAccessFromFileURLs(true);
        //开启javascript渲染
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true); // 启用DOM Storage API支持
        webSettings.setPluginState(WebSettings.PluginState.ON_DEMAND);

        //设置自适应屏幕，两者合用
        webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小
        webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小

        //其他细节操作
        webSettings.setCacheMode(mWebView.getSettings().LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存
        webSettings.setAllowFileAccess(true); //设置可以访问文件
        webSettings.setAllowContentAccess(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
        webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
        webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

        //优先使用缓存:
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        mWebView.setWebViewClient(new WebViewClient(){
                    @Override
                    public boolean shouldOverrideUrlLoading(WebView view, String url) {
                        if (url.startsWith("file:///android_asset/")) {
                            view.loadUrl(url);
                            return true;
                        }
                        return false;
                    }
                });

        //载入内容
        mWebView.loadUrl("file:///android_asset/VRPlayVideo.html");

8.电脑上插上设备，电脑或者vr眼镜打开开发者模式的硬件,点击绿三角运行，apk就会装到手机上或者VR眼镜里。