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眼镜里。
其实安卓打包APK的方式是使用了内部提供的webview控件,将web网页套壳进行打包
到这一步,web端的普通项目打包APK就完成了,一般来说到这一步three.js项目用Mesh加载个几何体就能看见,加载模型就死活看不见,我至今不知道为什么,但是我已经解决了。
如果你也要用three.js的项目加载模型打包APK进手机或者VR眼镜,那就看下篇文章吧,我今天写累了。。。着急的话就留言联系我