AR 配置并导出IOS开发环境配置

Posted 2023-04-02 X-q-X

文章目录

• 前言
• 一、导入插件
• 二、设置开发环境
• 三、搭建基础框架
• 四、代码
• 五、导出
• 六、测试
• 总结

---

前言

最近接了公司的一个AR项目，需要用MacBook，所以赶鸭子上架，现学…小本本记下来
我用的unity是2020.3.15f2c1,
MacBook是 2020MacBook M1,
ipad是iPad mini(第五代)
建以unity2019.1以上,XCode10以上版本

---

一、导入插件

1. 新建一个3D项目类型

2. 点击unity菜单栏Windows->Package Manager
   

3. 弹出的菜单栏默认不显示我们所需要的AR插件，所以点击Packages下拉菜单选择unity registry
   

4. 如图，安装这三个插件
   

二、设置开发环境

1. 点击菜单栏fike->Build Settings…
   

2. 点击ios,再点击Switch Platfrom,切换到IOS平台
   

3. 然后点击左下角的player settings,点击左边的Player,设置公司名和产品名!
   

4. 展开Other Settings选项卡在Identification栏,Bundle Identifier中与上面的公司名和产品名一致,还有版本号
   

5. 再往下,Camera Usage Description中填写I Need Camera,
   设置Target Device,可以是iPhone或者iPad,
   因为使用真机调试所以Target SDK选择Device SDK,
   设置Target minimum IOS Version最低IOS版本为11.0
   设置处理器架构Architecture为ARM64
   

三、搭建基础框架

1. 删除主摄像机(因为AR Session Origin自带有AR摄像机)

2. 在Hierarchy空白处右击,然后选择XR->AR Session和AR Session Origin
   

3. 然后再Hierarchy空白处右击,选择XR->AR Default Plane,把它拖到Prefab文件夹做成预制体,然后删除Hierarchy下的AR Default Plane对象
   
   

4. 点击选择Hierarchy窗口下的AR Session Origin,在Inspector窗口点击Add Component按钮,输入arp,添加搜索出来的ARPlane Manager组件
   

5. 将刚才的AR Default Plane预制体拖入到ARPlane Manager组件下的Plane Prefab属性框
   

四、代码

1. 创建脚本并写入代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.XR.ARFoundation;
using UnityEngine.XR.ARSubsystems;
[RequireComponent(typeof(ARRaycastManager))]
public class AppController : MonoBehaviour
  
    public GameObject spawnPrefab;
    static List<ARRaycastHit> Hits;
    private ARRaycastManager mRaycastManager;
    private GameObject spawnedObject = null;
    private void Start()
    
        Hits = new List<ARRaycastHit>();
        mRaycastManager = GetComponent<ARRaycastManager>();
    

    private void Update()
    
        if (Input.touchCount == 0)
            return;
        var touch = Input.GetTouch(0);
        if (mRaycastManager.Raycast(touch.position, Hits, TrackableType.PlaneWithinPolygon | TrackableType.PlaneWithinBounds))
        
            var hitPose = Hits[0].pose;
            if (spawnedObject == null)
            
                spawnedObject = Instantiate(spawnPrefab, hitPose.position, hitPose.rotation);
            
            else
            
                spawnedObject.transform.position = hitPose.position;
            
        
    

2. 在Hierarchy窗口创建一个Sphere并附上材质,将Scale缩放成(0.1,0.1,0.1);制成预制体,并删除Hierarchy窗口下的Sphere
   
3. 然后选择Hierarchy窗口下的AR Session Origin,添加刚才写的脚本,并把Sphere预制体添加到脚本的Spawn Prefab属性框中
   

五、导出

1. 将iPhone或者iPad通过USB或者WIFI连接计算机,

2. 点击File选择Build Settings对话框,把当前场景添加进来
   

3. 然后点击Build And Run,将会生成XCode工程,建以保存在另一个文件夹

4. 打包后XCode打开生成工程后,依次点击XCode工程图标->工程名,选择真机设备,这里选择的是iPad
   

5. 在工程属性面板中选择General选项卡,检查Display Name和Bundle Identifier还有Version是否在unity设置一样
   

6. 然后点击Signing&Capabilities选项卡,选择开发者证书
   

7. 配置完成后点击左上角的编译运行图标开始编译、发布、部署、运行.
   

六、测试

1. 编译运行后,真机上可能出现不允许使用,那就打开设置->通用->设备管理->开发者App->验证应用,点击信任
   
   
   
   
   

2. 然后点击打开app,
   
   

总结

刚开始导出测试的时候,打开app后屏幕是黑的,没有弹出访问摄像机的提示,害的我一顿找啊,找了好久没找到什么问题,真™dfs#$%&DBAR#T^T#%@R437482&jsfbskdnfose
最后原来是player settings->XR Plug-in Management中的ARKIT没有打上勾

webpack开发环境配置相关

所谓的开发环境配置就是指在进行打包的时候，只有在程序员开发的时候用得到，一旦上线这些配置将无用。这就是开发环境配置，这个配置，可以极大的提高程序员的开发效率。

一、html-webpack-plugin

这是要一个用来导出的html文件的插件，并且可以将导出的的js文件自动的引入到该文件中，一般该文件导出到导出目录中。

1.安装插件：

npm installl html-webpack-plugin -D

2.文件配置

   entry:{
        'first':'./src/index.js',
        'second':'./src/index.js'
    },
  
	plugins:[
        //plugin的配置
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            title:'123',//生成html文件的标题
            filename:'first.html',//生成html文件的文件名，默认是index.html
            hash:true,      //是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式
            // chunks:允许插入到模板中的一些chunk，不配置此项默认会将所有的thunk注入到模板中，在配置多个页面时，每个页面注入的thunk应该是不相同的
            //需要通过该配置为不同页面注入不同的thunk;此时的chunks和前面的entry入口文件对应
            chunk:['first']

        })
    ],

二、处理html文件中img图片

之前我们处理过图片资源，但是当我们在html文件中直接导入图片时，是无法被url-loader进行处理的。这时候需要有一个loader来处理这个问题：

1.安装loder

 npm installl html-loader -D

2.文件配置

  rules:[
  			{
                test:/\\.html$/,
                //处理html文件的iumg图片(负责引入img。从而能被url-loader进行处理)
                loader:"html-loader"
            },
          ]

三、打包其他资源

其他资源包括除了html/js/css资源以外的资源，首先需要安装对应的loader

1.安装

	npm install file-loader -D 

2.文件配置

            //打包其他资源（除了html/js/css资源以外的资源）
            {
                exclude:/\\.(css|js|html)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]',
                    outputPath:'media', //导出的目录
                }
            }

四、deServer

开发服务器devServer:用来自动化(自动编译，自动打开浏览器，自动刷新浏览器)。
特点：，没有输出，只会在内存中编译打包，不会有任何输出 意思就是不会生成最后的build文件夹，输出让你可视的js包。

启动devServer指令为：npx webpack-dev-server。

使用webpack会将打包结果输出出去。

1.安装deServer

	npm install deServer -D

 devServer:{
        contentBase:resolve(__dirname,'build'),
        //启动gzip压缩
        compress:true,
        //端口号
        port:3000,
        //自动打开浏览器
        open:true,
    }

除了上面所列的还有之前所讲的css-loader等基本的开发环境配置。这里就不在赘述了。