小魔龙
小魔龙

Unity3d EasyAR开发案例系列教程

这篇文章介绍如何使用EasyAR.unitypackage配置EasyAR

参考资料

1、EasyAR 初学者入门指南 

http://forum.easyar.cn/portal.php?mod=view&aid=2 

2、EasyAR入门 

https://www.easyar.cn/doc_sdk/cn/Getting-Started/Getting-Started-with-EasyAR.html 

3、Unity – 使用easyAR的基础教程 

https://www.cnblogs.com/mafeng/p/7600172.html

EasyAR入门

EasyAR是好用免费的全平台AR（Augmented Reality，增强现实）引擎。

EasyAR支持使用平面目标的AR，支持1000个以上本地目标的流畅加载和识别，支持基于硬解码的视频（包括透明视频和流媒体）的播放，支持二维码识别，支持多目标同时跟踪。

EasyAR支持PC和移动设备等多个平台，EasyAR不会显示水印，也没有识别次数限制。

在拿到EasyAR package或EasyAR样例之后，你需要一个key才能使用。请确保在使用EasyAR之前阅读以下内容。

免费注册

使用EasyAR之前需要使用邮箱在www.easyar.cn注册

*如果邮箱已经在视+官网（www.sightp.com ）注册，可以直接登录。

KEY的获取

准备好识别图之后，我们需要到官网（http://www.easyar.cn/view/open/app.html）来为我们的AR APP申请key。首先点击 “开发中心” 

Unity3d EasyAR开发案例系列教程_第1张图片

点击 “添加 SDK license Key” 按钮，选择Basic 版本 


Unity3d EasyAR开发案例系列教程_第2张图片

接下来填写应用详情，填写你的应用名字与打包移动平台时必填的package name 


Unity3d EasyAR开发案例系列教程_第3张图片

确定好后，我们可以查看我们的Key 

Unity3d EasyAR开发案例系列教程_第4张图片

1.可以对应用名称进行修改 

2.可以对Bundle ID 进行修改 

3.若使用的是1.0的sdk，可以查看1.0的 Key

导入EasyAR的SDK

我们到EasyAR官网（http://www.easyar.cn/view/download.html）上下载”EasyAR2.0 package(for unity)” 

Unity3d EasyAR开发案例系列教程_第5张图片

当然也可以在这里直接下载整理好的 

http://pan.baidu.com/s/1dFGaHGH 

解压之后，我们将”EasyAR_SDK_2.0.0_Basic.unitypackage”导入到unity中 


导入之后，效果如图： 

Unity3d EasyAR开发案例系列教程_第6张图片

使用步骤

找一张图片当做识别图，自己的照片也可以哦，推荐颜色不要单一的识别图，不然一种颜色识别不到就尴尬了。然后在Unity里创建一个名叫StreamingAssets的文件夹，把图片拖在这里。另外再拖一次放在Assets下。 

Unity3d EasyAR开发案例系列教程_第7张图片
Unity3d EasyAR开发案例系列教程_第8张图片

接下来我们删除原有场景的”Main Camera”，然后打开EasyAR文件夹，把Prefabs文件夹下的EasyAR_Startup预设体拖到面板 

Unity3d EasyAR开发案例系列教程_第9张图片
Unity3d EasyAR开发案例系列教程_第10张图片

中面板上的EasyAR_Startup，修改它的属性，把我们之前复制的key粘贴进去 


Unity3d EasyAR开发案例系列教程_第11张图片
Unity3d EasyAR开发案例系列教程_第12张图片

找到Primitives文件夹下的ImageTarget预设，把它也拖到面板。把ImageTarget上的ImageTargetBehaviour脚本删掉，新建一个脚本EasyImageTargetBehaviour，拖到ImageTarget物体上

编写脚本EasyImageTargetBehaviour

usingUnityEngine;namespace EasyAR{publicclassEasyImageTargetBehaviour : ImageTargetBehaviour    {protectedoverridevoidAwake()        {base.Awake();            TargetFound += OnTargetFound;            TargetLost += OnTargetLost;            TargetLoad += OnTargetLoad;            TargetUnload += OnTargetUnload;        }voidOnTargetFound(TargetAbstractBehaviour behaviour)        {            Debug.Log("Found: "+ Target.Id);        }voidOnTargetLost(TargetAbstractBehaviour behaviour)        {            Debug.Log("Lost: "+ Target.Id);        }voidOnTargetLoad(ImageTargetBaseBehaviour behaviour, ImageTrackerBaseBehaviour tracker,boolstatus)        {            Debug.Log("Load target ("+ status +"): "+ Target.Id +" ("+ Target.Name +") "+" -> "+ tracker);        }voidOnTargetUnload(ImageTargetBaseBehaviour behaviour, ImageTrackerBaseBehaviour tracker,boolstatus)        {            Debug.Log("Unload target ("+ status +"): "+ Target.Id +" ("+ Target.Name +") "+" -> "+ tracker);        }    }}


6、 接下来，我们填写如下信息 


Unity3d EasyAR开发案例系列教程_第13张图片

- Path: 识别图的路径 

- Name:识别图的名字 

- Size:识别图的大小 

Unity3d EasyAR开发案例系列教程_第14张图片
Unity3d EasyAR开发案例系列教程_第15张图片


Unity3d EasyAR开发案例系列教程_第16张图片

注意，我们一定要将Storage 的格式修改为Assets

关于Storage：

Unity3d EasyAR开发案例系列教程_第17张图片

7.建一个Cube,颜色改为红色，Cube的位置在识别图上方，然后把它拖在ImageTarget下当它的子物体。 

现在运行游戏，激活ImageTarget，Cube就显现出来了。一个简单的AR就做成了。（EasyAR就这点比较好，可以在Unity里面看效果）。 

在以后的开发里也可以通过控制ImageTarget的激活和不激活让物体显现和消失，抑或怎么去显现。 


Unity3d EasyAR开发案例系列教程_第18张图片
Unity3d EasyAR开发案例系列教程_第19张图片

8.打包成APK，File–buildsetings,场景拖进去，选择，点击Playerseting，设置一下参数： 

我们填写好信息，注意Compang Name 与我们申请key时的公司或团队名相同（比如我申请时填的是：mars），Product Name 也要和我们申请key时填的应用名相同（本次的项目演示为：HelloAR） 


Unity3d EasyAR开发案例系列教程_第20张图片

我们的Bundle Identifier 也要修改为 


Unity3d EasyAR开发案例系列教程_第21张图片

最后是最关键的一部分:我们的Graphics API 使用的是 OpenGLES2 

Unity3d EasyAR开发案例系列教程_第22张图片

9.OK，现在把打包好的APK安装在Android手机上,运行，扫面这张识别图，你的模型就出来了。 

怎么样小伙伴们，你会了吗？

EasyAR应用-多图识别

开发资源：

源码：https://pan.baidu.com/s/1cYaJmnBTqFcVMG2bggQaTQ 密码:br4d

Step 1:新建项目导入sdk

我们新建一个unity项目，命名为”ARMultiTarget” 

Unity3d EasyAR开发案例系列教程_第23张图片

接着导入我们的EasyAR 2.0 package并进行基本环境的搭建,首先我们像上次操作一样，在unity中新建一个文件夹,命名为”StreamingAssets”，将我们的识别图导入到该文件目录下 


Unity3d EasyAR开发案例系列教程_第24张图片

删除原有的”Main Camera”，将我们的”EasyAR_ImageTracker-1-MultiTarget” 拖到面板中 


Unity3d EasyAR开发案例系列教程_第25张图片

接着我们到官网申请Key填写到相机上 

Unity3d EasyAR开发案例系列教程_第26张图片

Step 2:处理相机

我们要编写段脚本来处理EasyAR 的多图识别功能，在”EasyAR_ImageTracker-1-MultiTarget” 组件上新建一个脚本”HelloARTarget” 


Unity3d EasyAR开发案例系列教程_第27张图片

脚本下载: https://pan.baidu.com/s/12tf0aEVwW9Z2AUjK4qJR6Q 密码:wg2n 

脚本具体内容如下：

usingUnityEngine;usingEasyAR;namespace EasyARSample{publicclassHelloARTarget : MonoBehaviour    {privateconststringtitle ="Please enter KEY first!";privateconststringboxtitle ="===PLEASE ENTER YOUR KEY HERE===";privateconststringkeyMessage =""+"Steps to create the key for this sample:\n"+"  1. login www.easyar.com\n"+"  2. create app with\n"+"      Name: HelloARMultiTarget-SameImage (Unity)\n"+"      Bundle ID: cn.easyar.samples.unity.helloarmultitarget.si\n"+"  3. find the created item in the list and show key\n"+"  4. replace all text in TextArea with your key";privatevoidAwake()        {if(FindObjectOfType().Key.Contains(boxtitle))            {#ifUNITY_EDITORUnityEditor.EditorUtility.DisplayDialog(title, keyMessage,"OK");#endifDebug.LogError(title +" "+ keyMessage);            }        }    }}


Step 3: 处理ImageTarget

我们准备两张识别图 

Unity3d EasyAR开发案例系列教程_第28张图片


Unity3d EasyAR开发案例系列教程_第29张图片

接下来我们拖动一个”ImageTarget”组件到面板中 


Unity3d EasyAR开发案例系列教程_第30张图片

我们像之前最基础操作的那样处理好ImageTarget,使得可以显示一个model（不懂的可以看看之前的教程：EasyAR基础入门之显示模型），我们在其下面新建一个cube，具体效果如下图： 


Unity3d EasyAR开发案例系列教程_第31张图片

我们再建一个ImageTarget，改变识别图和cube的材质，效果如图： 


Unity3d EasyAR开发案例系列教程_第32张图片


Unity3d EasyAR开发案例系列教程_第33张图片

最后我们Build 测试就可以实现预览的效果了。 

EasyAR多图识别简单案例—双卡battle1.0

本次的案例是双卡battle1.0，适合AR开发初学者，主要目的是帮助大家更进一步了解EasyAR 多图识别的应用场景，在往后的技术分享我们会推出完整的AR battle 案例。

预览：

开发功能描述：

当两张识别图相碰时，出现“战斗开始”的提示,两个怪物播放各自的动画

开发素材

源码：链接: https://pan.baidu.com/s/1jHNOZ6e 密码: n2hy

NGUI插件：链接: https://pan.baidu.com/s/1eRG8KN4 密码: 8mf9

Step 1:开发环境搭建

我们在前面已经了解了如何用EasyAR SDK来开发多图识别，本次的案例是在此基础上进行开发的，当然了我们也可以在EasyAR的官方案例进行开发（两种方法大同小异）.上次我们的项目框架如图： 

Unity3d EasyAR开发案例系列教程_第34张图片

将所需的模型资源导入到我们的项目中，目录结构为： 

Unity3d EasyAR开发案例系列教程_第35张图片

Step 2：模型的设置

将我们准备好的模型分别替换Cube，并适当修改它们的Scale 与 rotation，效果如图： 

Unity3d EasyAR开发案例系列教程_第36张图片

我们分别对两个模型进行参数设置，首先对ImageTarget 下的模型设置Scale 与 Rotation 


我们还需要对它的Animation修改，在本次案例中，我们只需要”n2017_idle” 与”n2017_skill_2”。效果如图： 


Unity3d EasyAR开发案例系列教程_第37张图片

还需将”n2017_skill_2” 这个Animation 的”Wrap Mode “设置为”Loop” 


另外一个模型的设置也是这样，大家自行设置，所需的Animation 为”Standby”和”Attack3” 


Unity3d EasyAR开发案例系列教程_第38张图片

然后接着为两个模型添加Box Collider，并勾选Is Trigger，在这里，我们需要设置Box Collider 的大小，使得长度稍稍大于图片的宽度，方便我们的碰撞检测，给大家一个参考的数值： 


Unity3d EasyAR开发案例系列教程_第39张图片

为了使用OnTriggerEnter() 方法，我们还需在一个模型身上挂一个RigidBody 组件 

Unity3d EasyAR开发案例系列教程_第40张图片

Step 3：编写脚本

首先当我们的两张识别图靠近时，我们显示一个UI，提示“战斗开始”，这里我们用NGUI来实现。 

PS：对于NGUI不熟悉的可以看看这些教程： 

http://www.taikr.com/course/445 

http://www.taikr.com/course/34

我们创建个label 


Unity3d EasyAR开发案例系列教程_第41张图片

修改label文字内容为“战斗开始” 


Unity3d EasyAR开发案例系列教程_第42张图片

效果如图： 


Unity3d EasyAR开发案例系列教程_第43张图片

然后我们在Label 上添加一个Tween-Alpha 脚本来 


Unity3d EasyAR开发案例系列教程_第44张图片

我们调整我们Alpha 从0变到1，并且设置动画时长为2s。 


Unity3d EasyAR开发案例系列教程_第45张图片

接着我们编写新建代码”PlayAnim”,实现当两张识别图靠近时，出现这个title，即label，首先我们要将label 设为不可见： 


Unity3d EasyAR开发案例系列教程_第46张图片

然后编写代码：

usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassPlayAnim : MonoBehaviour {publicTweenAlpha label;// Use this for initializationvoidStart () {    }// Update is called once per framevoidUpdate () {        }voidOnTriggerEnter(Collider col)    {            label.gameObject.SetActive (true);        label.PlayForward ();    }}


通过碰撞检测，我们处理label 的显示——首先是设置label为可见，接着播放它的Tween–Alpha 动画，即Alpha 在2s内从0–1，即两张识别图靠近之后，“战斗开始”这几个字在2s内出现。

当显示完后，我们不希望它一直出现，所以我们需要处理它的隐藏。我们在这个脚本基础上写一个方法：

publicvoidHide()    {        label.gameObject.SetActive (false);    }


然后调用，操作方法类似unity 给Button添加方法。 


Unity3d EasyAR开发案例系列教程_第47张图片

最后我们再来实现动画的交互，代码相对简单，属于unity最基本东西

usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassPlayAnim : MonoBehaviour {privateAnimation anim;// Use this for initializationvoidStart () {        anim = GetComponent ();    }// Update is called once per framevoidUpdate () {        }voidOnTriggerEnter(Collider col)    {        anim.Play ("n2017_skill_2");        col.gameObject.GetComponent ().Play ("Attack3");    }}


完整脚本地址：链接: https://pan.baidu.com/s/1kVmP095 密码: 4kzx 

原文链接：http://forum.easyar.cn/portal.php?mod=view&aid=4

EasyAR开发技巧—模型交互操作

AR 开发中常用的交互功能总结

我们在EasyAR 初学者入门系列的第一篇教程中展现了EasyAR 最基本的功能，使得一个模型以AR技术呈现在我们面前，实在炫酷。扫描识别图之后展现一个模型，如果仅仅是静态的，体验效果也不是很好，所以根据市面上的常见AR APP，给大家总结了几种常见的AR模型的交互方式。我们在最基础的 HelloAR 这个项目的基础上进行开发，前提是大家已经掌握好了如何基础性的搭建EasyAR+unity 的开发方式，不懂得伙伴可以跳转到：EasyAR 初学者入门指南（1）—显示模型阅读。 

关于交互方式，在这里主要给大家提供思路以及脚本文件。

源码：链接: https://pan.baidu.com/s/1pKSy5jP 密码: yy2b

Step 1:导入项目

我们以后的开发都在EasyAR 的官方项目”HelloAR” 的基础上进行，首先我们需要到官网上下载并导入unity中 

Unity3d EasyAR开发案例系列教程_第48张图片

下载好后，我们将HelloAR 在unity 中打开 


Unity3d EasyAR开发案例系列教程_第49张图片

下载好后，我们将HelloAR 在unity 中打开 

Unity3d EasyAR开发案例系列教程_第50张图片

Step 2:点击模型本身交互

预览： 


实现功能：点击Cube（扫描识别图出现的模型）我们可以更换它的颜色。

我们先删除另外两个不用的ImageTarget，只在”ImageTarget-JsonFile-idback” 身上做文章 


Unity3d EasyAR开发案例系列教程_第51张图片

我们新建一个Material，命名为”blue” 


Unity3d EasyAR开发案例系列教程_第52张图片

然后在Cube 上新建一个脚本”ChangeColor”,来实现点击时cube 颜色的改变，这段脚本属于unity 最基本的知识，主要是定义两个Material ，然后在OnMouseDown（) 方法中进行修改替换，同时我们也定义了一个布尔类的标识位。

脚本地址：链接: https://pan.baidu.com/s/1miidEOS 密码: 5x6d

usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassChangeColor : MonoBehaviour {publicMaterial blue;publicMaterial id;privateboolisClick =false;// Use this for initializationvoidStart () {        }// Update is called once per framevoidUpdate () {      }voidOnMouseDown()    {if(!isClick) {this.gameObject.GetComponent ().material = blue;            isClick =true;        }else{this.gameObject.GetComponent ().material = id;            isClick =false;        }    }}



Unity3d EasyAR开发案例系列教程_第53张图片

Step 2:双手缩放 

预览： 


在开发AR APP功能开发时，双手缩放是最常见的功能，这也是一种最自然的交互手段，实现这样的功能也非常的简单，我们在Cube 上挂一个脚本,命名为”Gesture”

脚本地址：链接: https://pan.baidu.com/s/1geDLOPl 密码: ykwf 

usingUnityEngine;usingSystem.Collections;publicclassGesture : MonoBehaviour {privateTouch oldTouch1;//上次触摸点1(手指1)privateTouch oldTouch2;//上次触摸点2(手指2)voidUpdate()    {//没有触摸，就是触摸点为0if(Input.touchCount <=0)        {return;        }//多点触摸, 放大缩小Touch newTouch1 = Input.GetTouch(0);        Touch newTouch2 = Input.GetTouch(1);//第2点刚开始接触屏幕, 只记录，不做处理if(newTouch2.phase == TouchPhase.Began)        {            oldTouch2 = newTouch2;            oldTouch1 = newTouch1;return;        }//计算老的两点距离和新的两点间距离，变大要放大模型，变小要缩放模型floatoldDistance = Vector2.Distance(oldTouch1.position, oldTouch2.position);floatnewDistance = Vector2.Distance(newTouch1.position, newTouch2.position);//两个距离之差，为正表示放大手势， 为负表示缩小手势floatoffset = newDistance - oldDistance;//放大因子， 一个像素按 0.01倍来算(100可调整)floatscaleFactor = offset /100f;        Vector3 localScale = transform.localScale;        Vector3 scale =newVector3(localScale.x + scaleFactor,            localScale.y + scaleFactor,            localScale.z + scaleFactor);//在什么情况下进行缩放if(scale.x >=0.05f && scale.y >=0.05f && scale.z >=0.05f)        {            transform.localScale = scale;        }//记住最新的触摸点，下次使用oldTouch1 = newTouch1;        oldTouch2 = newTouch2;    }}


Step 3：任意拖动

预览： 


脚本地址：链接: https://pan.baidu.com/s/1pL7Je9l 密码: s4g5

这样的功能在市面上的AR APP 中也很常见，比如视+ APP，我们可以快速的将模型拖动到任何位置。我们同样的在Cube新建段脚本，命名为”Drag”

usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassDrag : MonoBehaviour {privateVector3 _vec3TargetScreenSpace;// 目标物体的屏幕空间坐标privateVector3 _vec3TargetWorldSpace;// 目标物体的世界空间坐标privateTransform _trans;// 目标物体的空间变换组件privateVector3 _vec3MouseScreenSpace;// 鼠标的屏幕空间坐标privateVector3 _vec3Offset;// 偏移voidAwake() { _trans = transform; }    IEnumerator OnMouseDown()    {// 把目标物体的世界空间坐标转换到它自身的屏幕空间坐标_vec3TargetScreenSpace = Camera.main.WorldToScreenPoint(_trans.position);// 存储鼠标的屏幕空间坐标（Z值使用目标物体的屏幕空间坐标）_vec3MouseScreenSpace =newVector3(Input.mousePosition.x, Input.mousePosition.y, _vec3TargetScreenSpace.z);// 计算目标物体与鼠标物体在世界空间中的偏移量_vec3Offset = _trans.position - Camera.main.ScreenToWorldPoint(_vec3MouseScreenSpace);// 鼠标左键按下while(Input.GetMouseButton(0))        {// 存储鼠标的屏幕空间坐标（Z值使用目标物体的屏幕空间坐标）_vec3MouseScreenSpace =newVector3(Input.mousePosition.x, Input.mousePosition.y, _vec3TargetScreenSpace.z);// 把鼠标的屏幕空间坐标转换到世界空间坐标（Z值使用目标物体的屏幕空间坐标），加上偏移量，以此作为目标物体的世界空间坐标_vec3TargetWorldSpace = Camera.main.ScreenToWorldPoint(_vec3MouseScreenSpace) + _vec3Offset;// 更新目标物体的世界空间坐标_trans.position = _vec3TargetWorldSpace;// 等待固定更新yieldreturnnewWaitForFixedUpdate();        }    }}


原文链接：http://forum.easyar.cn/portal.php?mod=view&aid=5

AR交互操作实例—玩转僵尸

原文链接：http://forum.easyar.cn/portal.php?mod=view&aid=6

通过视+ APP上的一个案例来了解熟悉AR开发常用的交互技巧

在上一篇的EasyAR 开发技巧—模型交互操作 我们熟悉了比较流行的移动端AR的交互技巧，今天我们在此基础上继续深入的了解，通过一个类似视+ APP 的一个实例来复习或熟悉AR开发的交互技巧。

预览：

相关资源：

iTween 插件：链接: https://pan.baidu.com/s/1nuNMajn 密码: b9nv

Step 1:开发准备

下载EasyAR SDK，搭建EasyAR 开发的最基本环境。（前面有基础教程：EasyAR 初学者入门指南（1）—显示模型） 

ok,接下来我们删除unity原有的Main Camera，把EasyAR_Startup的摄像机拖入到面板中。 


Unity3d EasyAR开发案例系列教程_第54张图片

接着把导入的怪物模型拖入面板中（注意：我们这里并没有用到Imagetarget，因为不需要识别功能。大家还可以脑洞大开，来为模型的展现增加个缓冲显示效果，在这里我就不实现了，主要把AR 移动端的核心知识给大家分享一下） 

Unity3d EasyAR开发案例系列教程_第55张图片

Step 2：修改相关参数

先修改AR相机的角度，使其X值旋转270度 


接下来使怪物Y值旋转180度，并放大2倍，修改默认动画（也可以不修改，只不过使的看起来效果更惊艳）。 


Unity3d EasyAR开发案例系列教程_第56张图片

给怪物添加BoxCollider，并勾选is Trigger

Step 3：实现点击怪物播放动画实现交互

首先给物体再加一个Animation，根据你自己的喜爱添加相应的Animation 


Unity3d EasyAR开发案例系列教程_第57张图片

接下来新建一段代码实现动画交互，代码十分简单，我们在上一篇（交互操作）上讲过，大家套用框架就好。

usingUnityEngine;usingSystem.Collections;publicclassPlayAnim : MonoBehaviour {publicAnimation anim;voidStart()        {                anim = GetComponent();}voidUpdate(){if(!anim.isPlaying) {anim.Play ("2HitCombo");}}voidOnMouseDown(){anim.Play ("jumpAttack_RM");}}


然后我们要实现的是双指实现缩放，单指任意拖动，这部分的代码在前一篇文章（EasyAR开发技巧—模型交互操作）中讲过，以后可以把这些当作常用代码来使用，会比较方便，直接拖动到模型身上即可。

step 4:点哪走哪

在这里，我只提供自己的一种实现方法，当然实现这种效果可以有很多方法。 

首先，我们先建一个plane，修改大小为（2，2，2） 


Unity3d EasyAR开发案例系列教程_第58张图片


Unity3d EasyAR开发案例系列教程_第59张图片

然后，接下来，修改其Tag为Ground 


最重要的一部分，关闭其Renderer，使其不显示，在这里我们只要Mesh Collider 


Unity3d EasyAR开发案例系列教程_第60张图片


Unity3d EasyAR开发案例系列教程_第61张图片

我们先在这个模型新建个脚本，在这里我们用射线检测的方法来实现。 

我们用Input.touchCount 先判断是否有触摸事件，然后获取Input.GetTouch(0).position ，触摸手机屏幕的位置，然后射线检测，实现移动，完整代码如下：

usingUnityEngine;usingSystem.Collections;publicclassPlayer : MonoBehaviour {privateVector3 clickPosion;publicfloatspeed =5f;voidStart(){clickPosion = transform.position;}voidUpdate(){if(Input.touchCount >0) {Ray ray = Camera.main.ScreenPointToRay(Input.GetTouch (0).position);RaycastHit hit;Physics.Raycast(ray,outhit);try{if(hit.collider.tag =="Ground")//获取点击位置的世界坐标{Vector3 v = hit.point;clickPosion =newVector3(v.x, transform.position.y, v.z);transform.LookAt(clickPosion);}}catch{}iTween.MoveTo(gameObject, clickPosion,4f);}}}


关于iTween 知识： 

1.http://edu.manew.com/course/6 

2.http://www.xuanyusong.com/archives/2052

EasyAR 二维码+AR的应用

EasyAR实现二维码+AR的应用第一篇章

二维码在我们生活总早已是司空见惯了，当AR碰撞上二维码，一定可以产生好玩的效果。EasyAR对于二维码的识别与支持是相当不错的，所以在这一篇与下一篇的教程中，我们会分享如何从零开发二维码+AR 的应用。

Step 1:开发环境

我们需要新建一个unity项目，并将”EasyAR_SDK_2.0.0_Basic” 的unitypackage导入，关于EasyAR+unity 这些基础操作不懂的可以看看之前的文章“EasyAR 初学者入门指南（1）—显示模型”，在这里我一笔带过。导入之后，我们的unity目录界面应该是这样的：

Unity3d EasyAR开发案例系列教程_第62张图片

我们删除原有的Main Camera，将”EasyAR_ImageTracker-1_QRCode-1” 拖到面板中。并将官网申请的Key填好。 


Unity3d EasyAR开发案例系列教程_第63张图片

观察”EasyAR_ImageTracker-1_QRCode-1”这个预制体，对比与我们之前常用的”EasyAR_Startup”,发现多了一个”BarCodeScanner” 的部分。 


Unity3d EasyAR开发案例系列教程_第64张图片



它上面所挂的脚本”QRCodeScannerBehaviour”使用来实现二维码的扫描与识别功能的。这是对于它的具体描述： 

Unity3d EasyAR开发案例系列教程_第65张图片
Unity3d EasyAR开发案例系列教程_第66张图片

Step 2:制作二维码资源

我们需要准备二维码的图片，有许多网站都可以来制作自己的二维码。我制作的内容大致如下： 

Unity3d EasyAR开发案例系列教程_第67张图片

大家也可以发挥自己的脑洞，随意写些内容，目前我们先实现通过EasyAR SDK 来实现扫描二维码 显示文字的功能。

Step 3：编辑代码

我们准备好了二维码，接下来就是在unity里编辑代码来实现功能，首先我们在”EasyAR_ImageTracker-1_QRCode-1” 下新建一个脚本，命名为”ARIsEasyBehaviour”, 


Unity3d EasyAR开发案例系列教程_第68张图片

脚本下载地址：链接: https://pan.baidu.com/s/1dF5tigx 密码: 9ag5

usingSystem.Collections;usingUnityEngine;namespace EasyAR{publicclassARIsEasyBehaviour : MonoBehaviour    {privateconststringtitle ="Please enter KEY first!";privateconststringboxtitle ="===PLEASE ENTER YOUR KEY HERE===";privateconststringkeyMessage =""+"Steps to create the key for this sample:\n"+"  1. login www.easyar.com\n"+"  2. create app with\n"+"      Name: HelloARQRCode (Unity)\n"+"      Bundle ID: cn.easyar.samples.unity.helloarqrcode\n"+"  3. find the created item in the list and show key\n"+"  4. replace all text in TextArea with your key";privateboolstartShowMessage;privateboolisShowing;privatestringtextMessage;privatevoidAwake()        {varEasyARBehaviour = FindObjectOfType();if(EasyARBehaviour.Key.Contains(boxtitle))            {#ifUNITY_EDITORUnityEditor.EditorUtility.DisplayDialog(title, keyMessage,"OK");#endifDebug.LogError(title +" "+ keyMessage);            }            EasyARBehaviour.Initialize();foreach(varbehaviourinARBuilder.Instance.ARCameraBehaviours)            {                behaviour.TargetFound += OnTargetFound;                behaviour.TargetLost += OnTargetLost;                behaviour.TextMessage += OnTextMessage;            }foreach(varbehaviourinARBuilder.Instance.ImageTrackerBehaviours)            {                behaviour.TargetLoad += OnTargetLoad;                behaviour.TargetUnload += OnTargetUnload;            }        }voidOnTargetFound(ARCameraBaseBehaviour arcameraBehaviour, TargetAbstractBehaviour targetBehaviour, Target target)        {            Debug.Log(" Found: "+ target.Id);        }voidOnTargetLost(ARCameraBaseBehaviour arcameraBehaviour, TargetAbstractBehaviour targetBehaviour, Target target)        {            Debug.Log(" Lost: "+ target.Id);        }voidOnTargetLoad(ImageTrackerBaseBehaviour trackerBehaviour, ImageTargetBaseBehaviour targetBehaviour, Target target,boolstatus)        {            Debug.Log(" Load target ("+ status +"): "+ target.Id +" ("+ target.Name +") "+" -> "+ trackerBehaviour);        }voidOnTargetUnload(ImageTrackerBaseBehaviour trackerBehaviour, ImageTargetBaseBehaviour targetBehaviour, Target target,boolstatus)        {            Debug.Log(" Unload target ("+ status +"): "+ target.Id +" ("+ target.Name +") "+" -> "+ trackerBehaviour);        }privatevoidOnTextMessage(ARCameraBaseBehaviour arcameraBehaviour,stringtext)        {            textMessage = text;            startShowMessage =true;            Debug.Log("got text: "+ text);        }        IEnumerator ShowMessage()        {            isShowing =true;yieldreturnnewWaitForSeconds(2f);            isShowing =false;        }privatevoidOnGUI()        {if(startShowMessage)            {if(!isShowing)                    StartCoroutine(ShowMessage());                startShowMessage =false;            }if(isShowing)                GUI.Box(newRect(10, Screen.height /2, Screen.width -20,30), textMessage);        }    }}


我们在这段脚本文件实现的是首先Target 的识别然后是扫描二维码之后接收结果并实现绘制在屏幕上，对于Target 的found与load等方法相信大家已经很熟悉了。对于OnTextMessage（）接收返回结果然后赋值给textMessage，并由OnGUI（）进行绘制。我们Build测试，会实现如下的效果： 


PS：在实际的开发中，我们不会像这样从零来搭建AR+二维码的开发环境，一般是直接在EasyAR官网的实例进行二次开发，这样会大大提高我们的效率。下一篇我们会实现二维码+AR的一个实例。

我们在此基础上继续完善demo

预览：

资源：

NGUI插件：链接: https://pan.baidu.com/s/1bMgGn8 密码: uviy 

资源地址：链接: https://pan.baidu.com/s/1kVCBiBX 密码: b3eg 

代码地址：链接: https://pan.baidu.com/s/1pKFAATX 密码: x7r9

Step 1:准备

首先是关于识别图的准备，在这次的案例演示中我使用了如下的图片（二维码可以自己制作）： 


Unity3d EasyAR开发案例系列教程_第69张图片

在unity中我们新建一个文件夹”StreamingAssets”,将识别图导入。并且新建文件夹“Scripts”，导入提前准备好的资源，框架图如下： 

Unity3d EasyAR开发案例系列教程_第70张图片

Step 2：制作ImageTarget

将ImageTarget拖入到面板中 


Unity3d EasyAR开发案例系列教程_第71张图片

remove掉原来挂在ImageTarget上的脚本，将我们导入的”EasyImageTargetBehaviour” 挂在上面（这部分属于EasyAR 图像识别最基本的操作，不懂的可以看看：EasyAR 初学者入门指南（1）—显示模型） 


Unity3d EasyAR开发案例系列教程_第72张图片

填写识别图信息，将我们导入的那张带有二维码的识别图名字与size配置好 


Unity3d EasyAR开发案例系列教程_第73张图片


Unity3d EasyAR开发案例系列教程_第74张图片

为了能在unity中看到识别图的具体信息，我们建立一个材质球使其显示。新建Material，模式设置为Mobile/Diffuse.效果如图： 


Unity3d EasyAR开发案例系列教程_第75张图片

这样在unity编辑器中就可以显示了，方便我们设置Scan扫描特效的配置 

Unity3d EasyAR开发案例系列教程_第76张图片

Step 3:制作扫描特效

将prefab scan 拖到ImageTarget 下面 


Unity3d EasyAR开发案例系列教程_第77张图片

适当调整Scan的位置与scale，这里大家自行调整使其达到一个合适的位置 

Unity3d EasyAR开发案例系列教程_第78张图片

编写脚本”Move”，实现扫描效果。脚本的思路其实很简单，就是在Update里不断更新Scan材质球的texture 的offset。

usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassMove : MonoBehaviour{publicfloatoffset_y =0.5f;voidAwake(){}voidStart(){}voidUpdate()    {        offset_y -= Time.deltaTime;this.GetComponent().material.SetTextureOffset("_MainTex",newVector2(0,offset_y));    }}


Step 4:制作UI显示二维码内容

我们使用NGUI来完成ui的制作。在这里的思路是根据你的二维码文字内容建立相应的label（我们在代码实现是通过逗号来分割内容分别显示在不同的label上）在本次的案例演示，我建立两个label（分别显示EasyAR与Cool）和一个Button（点击跳转网页）。具体的ui位置配置大家可以自行调试，效果如图： 


Unity3d EasyAR开发案例系列教程_第79张图片


Unity3d EasyAR开发案例系列教程_第80张图片

我是将三个UI控件（label，button）放在一个Empty GameObject下面，即”b”下面。我们将”b”添加个Tween 动画，使其演示效果更加炫酷，在这里我用的是Tween／Scale这一模式 


Unity3d EasyAR开发案例系列教程_第81张图片


Unity3d EasyAR开发案例系列教程_第82张图片

最后，将”b”这一GameObject 设为不可见 

Unity3d EasyAR开发案例系列教程_第83张图片

Step 5：编写代码

首先我们修改完善”Move” 这个脚本。思路是这样的，我们设置一个扫描时长，当达到这个时长时，我们设置Scan 这一object不可见，并且把我们准备好的UI控件显示，完整代码如下： 

脚本下载地址：链接: https://pan.baidu.com/s/1pKNFKMn 密码: xh6m

usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassMove : MonoBehaviour{publicfloatoffset_y =0.5f;publicGameObject btns;voidAwake(){}voidStart(){}voidUpdate()    {if(offset_y <= -3.0f)        {            btns.SetActive(true);            btns.GetComponent().PlayForward();this.gameObject.SetActive(false);        }else{            offset_y -= Time.deltaTime;this.GetComponent().material.SetTextureOffset("_MainTex",newVector2(0,offset_y));        }    }}


在unity操作界面将”b”赋值到脚本里 


Unity3d EasyAR开发案例系列教程_第84张图片

然后我们修改绑定在”EasyAR_ImageTracker-1_QRCode-1” 上的”ARIsEasyBehaviour” 脚本文件。主要是实现获得二维码内容text后将它显示在我们准备好的UI上。

在开头定义UIlabel

publicUILabel text1;publicUILabel text2;


然后在OnTextMessage（）方法里实现

privatevoidOnTextMessage(ARCameraBaseBehaviour arcameraBehaviour,stringtext){            textMessage = text;            text1.text = textMessage.Split (',')[0];            text2.text = textMessage.Split (',') [1];            startShowMessage =true;            Debug.Log("got text: "+ text);}


最后注释掉原有的OnGUI方法即可。 

完整代码地址：链接: https://pan.baidu.com/s/1jIwvMFs 密码: c8t8

对于按钮的交互，我们实现的是点击之后跳转到EasyAR SDK2.0的网页，实现起来相当简单，一句代码即可：Application.OpenURL (“http://www.easyar.cn/view/sdk.html“);

实现到这里，我们基本上就可以完成案例效果了。

EasyAR 开发实例—AR红包（初级）

原文链接：http://forum.easyar.cn/portal.php?mod=view&aid=10

用EasyAR SDK 来实现一个AR红包功能

分享一篇如何用EasyAR SDK来开发一个简单的AR红包的功能。

预览： 

开发资源：

粒子特效：链接: https://pan.baidu.com/s/1i5swzLN 密码: dwtr

NGUI插件: 链接: https://pan.baidu.com/s/1qYAyYL2 密码: 7jb2

Step 1:开发环境搭建

首先我们下载EasyAR SDK （unity版本）并导入到unity中，并到官网申请开发时所用到的Key值，在unity中，删除原有的Camera，将EasyAR_Startup拖入到面板中，并将key之填入。注意：在这里我们并没有用到识别功能，因此没必要用ImageTarget。 


Unity3d EasyAR开发案例系列教程_第85张图片

接下来，我们准备红包模型，有些人在导入红包模型的过程中可能会遇到贴图丢失的情况，在这里，我们只需将红包贴图重新挂到材质上即可。 


Unity3d EasyAR开发案例系列教程_第86张图片

在这里，我们准备两个红包预制体，来实现不同的交互。并修改它们的大小以便区分。在这里我给他们命名分别为Hong，HongBao。具体详细参数如下 

Hong： 


HongBao： 


接下来，我们给两个红包添加Tag，分别为Hong，HongBao。 




Unity3d EasyAR开发案例系列教程_第87张图片

为两个红包预制体添加BoxCollider，并勾选Trigger。大小自己调节。

最后，我们为我们所交互的那个红包HongBao添加个动画。选中它，并在菜单栏Window-Animation，打开后，点击Create，并保存命名。 


Unity3d EasyAR开发案例系列教程_第88张图片

接着点Add Property，选Transfrom-Scale 


Unity3d EasyAR开发案例系列教程_第89张图片

接着点Add Property，选Transfrom-Scale 


Step 2:产生红包

首先我们先创建几个随机点，分别命名point1，point2，point3，这是红包所降落的位置。参考数值如下：大家可以自行设置

point1: 


point2: 


point3: 


接下来，我们创建一段代码来使得红包可以降落，在这里用Translate来实现，当然大家可以用其他方法，比如添加Rigidbody，给个受力也可以，不过那样有点麻烦。（补充：当红包的Z坐标小于-8时，就销毁）

usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;publicclassMove : MonoBehaviour {publicGameObject par;// Use this for initializationvoidStart () {}// Update is called once per framevoidUpdate () {transform.Translate (-transform.forward*2f*Time.deltaTime);if(transform.position.z < -8f) {Destroy (this.gameObject);}}}


接下来，创建CreateHong空物体，在上面挂上CreateHong.cs脚本，实现随机产生红包。

usingUnityEngine;usingSystem.Collections;publicclassCreateHong : MonoBehaviour {publicTransform[] points;publicGameObject[] hongbaos;privateintindex;// Use this for initializationvoidStart () {InvokeRepeating ("CreateHongbao",1f,1f);}// Update is called once per framevoidUpdate () {}voidCreateHongbao(){inti = Random.Range (0,10);if(i >1) {index =0;}else{index =1;}GameObject go = GameObject.Instantiate (hongbaos [index], points [Random.Range (0, points.Length)].position +newVector3 (Random.Range (-0.5f,0.5f),0,0), Quaternion.identity)asGameObject;go.transform.Rotate (newVector3 (270,180,0));}}}


Step 3:交互

当点击抖动红包时我们产生炫酷的粒子特效，将如下方法添加到Move.cs中

void OnMouseDown(){if (gameObject.tag=="Hong") {Debug.Log("ddd");} else if(gameObject.tag=="HongBao") {CreateHong._instace.isCreate= false;GameObject go=GameObject.Instantiate(par,gameObject.transform.position,Quaternion.identity) as GameObject;Destroy (go,2f);}}


并在2s后销毁该粒子

好了，接下来，我们用NGUI插件实现产生优惠卷或红包（这不重要，重要的是实现思路与方法）

效果如下： 


Unity3d EasyAR开发案例系列教程_第90张图片

首先，我们创建Sprite 


Unity3d EasyAR开发案例系列教程_第91张图片

接着添加TweenScale 

Unity3d EasyAR开发案例系列教程_第92张图片

注意：


Unity3d EasyAR开发案例系列教程_第93张图片


Unity3d EasyAR开发案例系列教程_第94张图片

接下来我们使用单例模式在CreateHong.cs脚本中实现：

首先声明：

publicstaticCreateHong_instace;


接着：

voidAwake(){_instace =this;}


然后实现方法供外界调用

publicvoidPlayScale(){daxiao.gameObject.SetActive (true);daxiao.PlayForward ();}


在Move.CS中实现：

void OnMouseDown(){if (gameObject.tag=="Hong") {Debug.Log("ddd");} else if(gameObject.tag=="HongBao") {CreateHong._instace.isCreate= false;GameObject go=GameObject.Instantiate(par,gameObject.transform.position,Quaternion.identity) as GameObject;Destroy (go,2f);CreateHong._instace.PlayScale();}}


完整代码：Move.cs:链接: https://pan.baidu.com/s/1qYLS77Y 密码: 9n1u

CreateHong.cs:链接: https://pan.baidu.com/s/1jIBVt4q 密码: 483i

EasyAR 开发实例—AR礼物

原文链接：http://forum.easyar.cn/portal.php?mod=view&aid=11

EasyAR 开发出一个炫酷的节日礼物效果

预览：


Unity3d EasyAR开发案例系列教程_第95张图片

开发资源：

链接: https://pan.baidu.com/s/1mkWL7Ev7CWOyfp6s4_8JQw 密码:pznt

Step 1:开发环境

关于用EasyAR SDK 搭建AR 开发环境的文章，不懂得朋友可以看下”EasyAR 初学者入门指南（1）—显示模型”。我们直接讲解本次的核心内容。

我们下好资源后，导入到unity，搭建好基本AR环境。如图： 

Unity3d EasyAR开发案例系列教程_第96张图片

Step 2：准备模型

我们将准备好的资源–礼物与二次元女生导入到unity中，并将三个礼物盒子与女主角拖入到ImageTarget 充当子物体，礼物盒的模型位置在 


Unity3d EasyAR开发案例系列教程_第97张图片

女主角的模型位置在 


Unity3d EasyAR开发案例系列教程_第98张图片

拖入之后，根据自己的需求修改其位置，实现其如下效果： 


Unity3d EasyAR开发案例系列教程_第99张图片
Unity3d EasyAR开发案例系列教程_第100张图片

Step 3:编写脚本

首先为礼物盒添加Box Collider，并勾选Trigger 


Unity3d EasyAR开发案例系列教程_第101张图片

新建脚本，名字随便起，先实现点击礼物盒后，礼物盒消失二次元女生出现，这里用到了一个最巧但最常用方便的方法Void OnMouseDown（），使用这个方法前提是该物体挂了个Collider

voidOnMouseDown(){Destroy(this.gameObject);}

Step 4:添加粒子特效

使用粒子特效来使得更令人惊喜的礼物效果，粒子特效的资源位置在 


Unity3d EasyAR开发案例系列教程_第102张图片

接下来，编写脚本，脚本比较简单，基本思路就是在点击礼物盒子后，盒子销毁，创建粒子特效，代码如下：

usingUnityEngine;usingSystem.Collections;publicclassExplore : MonoBehaviour {publicGameObject explore1;publicGameObject explore2;publicGameObject explore3;publicAudioSource sound;// Use this for initializationvoidStart () {}// Update is called once per framevoidUpdate () {}voidOnMouseDown(){Destroy (this.gameObject);Instantiate (explore1,transform.position,transform.rotation);Instantiate (explore2, transform.position, transform.rotation);Instantiate (explore3,transform.position,transform.rotation);}}

粒子的选择与自己的喜好来选择，不一定和我一样，这样大家可以实现不同的效果。

Step 5:添加音效

音效对一个应用或游戏给人的用户体验影响还是很大的，给礼物盒子添加AudioSource 

Unity3d EasyAR开发案例系列教程_第103张图片

usingUnityEngine;usingSystem.Collections;publicclassExplore : MonoBehaviour {publicGameObject explore1;publicGameObject explore2;publicGameObject explore3;publicAudioSource sound;// Use this for initializationvoidStart () {}// Update is called once per framevoidUpdate () {}voidOnMouseDown(){Destroy (this.gameObject);sound.Play ();Instantiate (explore1,transform.position,transform.rotation);Instantiate (explore2, transform.position, transform.rotation);Instantiate (explore3,transform.position,transform.rotation);}}

OK，就是这样，用很简单的代码就可以用EasyAR SDK 开发出惊艳的应用。

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/q764424567/article/details/80583925

你可能感兴趣的:(Unity3d EasyAR开发案例系列教程)

  • 使用Vue创建cesium项目模版该如何选择？ 激动的兔子 Vue+Cesiumvue.jscesium
    目录问题描述模版说明及选用建议小结问题描述刚入手这个项目，什么都是一知半解。使用Vue,创建Cesium项目的时候，提示需要选择一个模版（如下图所示），该如何选择项目模版选，总结如下：模版说明及选用建议Cesium是一个开源的JavaScript库，用于在网页上创建3D地球和2D地图。在Vue项目中创建Cesium工程时，选择合适的模版对于项目的开发效率和后期维护至关重要。关于cesium、ces
  • Flask-RESTFul 之 RESTFul 的响应处理 Jasonakeke Flask框架flaskrestfulpython
    Flask-RESTFul之RESTFul的响应处理使用`Resource`类的`get()`,`post()`,`put()`,`delete()`等方法直接返回使用`abort`函数使用`make_response`自定义响应序列化数据使用`fields`和`marshal_with`使用自定义的序列化函数嵌套序列化使用`marshal`函数在使用Flask-RESTful开发RESTfulA
  • MapBox Android版开发 2 本地化 程序喵D MapBoxAndroid开发androidMapBox
    MapBoxAndroid版开发2本地化前言MapBoxV9本地化示例1示例2示例3运行效果图MapBoxV11本地化示例运行效果图前言前文介绍了MapBoxV9和V11两个版本配置和显示地图。默认MapBox地图语言为英文，本文重点介绍如何将地图语言设置为中文。MapBoxV9本地化示例1官方Examples中介绍如何改变地图语言在地图加载成功后，通过style对象，改变国家图层语言。代码如下：
  • python接口自动化测试 - mock模块基本使用介绍 程序员笑笑 软件测试python服务器apache功能测试软件测试自动化测试程序人生
    mock作用解决依赖问题，达到解耦作用当我们测试某个目标接口（模块）时，该接口依赖其他接口，当被依赖的接口未开发完成时，可以用mock模拟被依赖接口，完成目标接口的测试模拟复杂业务的接口当我们测试某个目标接口（模块），该接口依赖一个非常复杂的接口时，可以用mock来模拟这个复杂的业务接口；也解决接口依赖一样的原理单元测试如果某个接口（模块）未开发完成时，又需要编写测试用例，则可以通过mock模拟该
  • vue 如何合并两个 项目_Vue.js中用webpack合并打包多个组件并实现按需加载 weixin_39959236 vue如何合并两个项目
    前言随着移动设备的升级、网络速度的提高，用户对于web应用的要求越来越高，web应用要提供的功能越来越。功能的增加导致的最直观的后果就是资源文件越来越大。为了维护越来越庞大的客户端代码，提出了模块化的概念来组织代码。webpack作为一种模块化打包工具，随着react的流行也越来越流行。使用Vue开发项目时，如果要使用其单文件组件特性，必然要使用webpack或者browserify进行打包，对于
  • 案例分析学习活动有感 熊更姣
    熊更姣焦点解决学习分享第11天（约练5次：2观1来2学）今天下午参加了一个案例分析学习活动，现分享感受如下：一、案例分析有套路：当案例提供者简单介绍案例基本情况后，老师要我们提问，我们一个个都急着问一些案例中的一些情节、环境等细节问题，看着越问越细越问越深，老师忍不住打住我们，让我们理性的按套路出牌。套路？我们似乎一个个都懵了，老师说在有效的时间内要分析一个案例，必须集中按咨询的基本流程为主线来探
  • 深入理解Java线程池：原理、使用与最佳实践 张某布响丸辣 java开发语言线程池
    在现代Java应用程序中，线程池（ThreadPool）是一种非常重要的并发工具，它允许开发者以高效、可控的方式管理并发执行的任务。线程池通过重用线程来减少线程创建和销毁的开销，并限制同时运行的线程数量，从而避免过多的线程竞争系统资源导致的性能问题。本文将深入探讨Java线程池的原理、如何使用以及最佳实践。一、线程池的原理1.1线程池的基本概念线程池是一种基于池化技术的多线程管理机制，它预先创建一
  • Webpack配置及工作流程 开发小途 webpack前端
    Webpack是一个现代JavaScript应用程序的静态模块打包器（modulebundler）。当Webpack处理应用程序时，它会在内部构建一个依赖图（dependencygraph），该图会映射项目所需的每个模块，并生成一个或多个bundle。基本配置步骤安装Webpack和WebpackCLI：使用npm或yarn将Webpack及其命令行接口（CLI）安装为开发依赖。npminstal
  • 自动化Python编程利器：AutomatePython 平奇群Derek
    自动化Python编程利器：AutomatePython在快速发展的数字时代，自动化是提高效率的关键。如果你是一名Python开发者，那么你一定想要有一款工具能够帮助你简化日常的任务自动化。这就是我要向你推荐的项目——。项目简介AutomatePython是一个强大的Python脚本库，它集合了一系列实用的函数和模块，旨在帮助开发者轻松实现各种自动化任务。由陈国辉开发并维护，该项目的目标是让Pyt
  • 如何看待“低代码”开发平台的兴起？ AI逍遥子 低代码
    近年来，“低代码”开发平台如雨后春笋般涌现，承诺让非专业人士也能快速构建应用程序。这种新兴技术正在挑战传统软件开发模式，引发了IT行业的广泛讨论。低代码平台是提高效率的利器，还是降低了编程门槛导致质量下降？它会改变开发者的工作方式吗？让我们一起探讨低代码开发的机遇与挑战。方向一：技术概览低代码平台的基本概念低代码平台是一种允许用户通过最少的手写代码甚至不编写代码来创建应用程序的软件开发环境。它通过
  • Spring MVC 详细笔记、原理及实例演示 pox21s mvcjava架构springmvc
    SpringMVC参考：编程帮1.概述1.1简介**SpringMVC**框架是一个开源的Java平台，为开发强大的基于Java的Web应用程序提供全面的基础架构支持非常容易和非常快速。SpringwebMVC框架提供了MVC(模型-视图-控制器)架构和用于开发灵活和松散耦合的Web应用程序的组件。MVC模式导致应用程序的不同方面(输入逻辑，业务逻辑和UI逻辑)分离，同时提供这些元素之间的松散耦合
  • Scratch的无限可能：打造个性化编程界面 2401_85702623 前端javascript开发语言
    标题：Scratch的无限可能：打造个性化编程界面Scratch，这款由麻省理工学院媒体实验室开发的视觉编程环境，已经成为全球数百万儿童和成人学习编程的首选工具。它以其独特的拖拽式编程块和用户友好的界面，引领了编程教育的革命。但Scratch的能力不止于此，本文将探讨Scratch是否支持创建自定义的编程界面或工具，并展示如何通过Scratch实现个性化编程体验。1.Scratch的自定义潜力Sc
  • STM32 FMC/FSMC接口与外部NOR Flash存储器的交互研究 嵌入式杂谈 stm32microsoft嵌入式硬件
    为了实现STM32的FMC/FSMC接口与外部NORFlash存储器的交互，我们需要了解NORFlash存储器的特点、FMC/FSMC接口的配置和相关操作代码。下面我将介绍NORFlash存储器的特点、FMC/FSMC接口的配置步骤以及相关的交互操作，并给出相应的示例代码。✅作者简介：热爱科研的嵌入式开发者，修心和技术同步精进❤欢迎关注我的知乎：对error视而不见代码获取、问题探讨及文章转载可私
  • 在前端开发中使用命令模式：JavaScript和Vue的实现技巧 范范0825 javascript命令模式vue.js
    在前端开发中使用命令模式：JavaScript和Vue的实现技巧1.引言命令模式（CommandPattern）是一种行为设计模式，它将请求的发送者和请求的接收者解耦。该模式允许将请求封装为一个对象，从而可以使用不同的请求、队列请求和记录请求日志。它在前端开发中，尤其是在JavaScript和Vue框架中，提供了极大的灵活性和可扩展性。本文将深入探讨如何在前端开发中应用命令模式，重点讲解JavaS
  • 通过命令模式实现复杂业务流程的解耦 范范0825 命令模式华为
    通过命令模式实现复杂业务流程的解耦在当今的软件开发中，系统的复杂性与日俱增，如何有效地管理这些复杂性成为了开发者面临的主要挑战之一。在这样的背景下，设计模式的应用尤为重要。设计模式不仅提供了解决常见问题的通用方法，还能够帮助开发者在处理复杂业务逻辑时，实现代码的高内聚和低耦合。本文将详细探讨如何通过命令模式（CommandPattern）来实现复杂业务流程的解耦，以提升系统的可维护性、扩展性和灵活
  • 工厂模式和策略模式的核心区别与最佳实践 范范0825 策略模式bash开发语言
    工厂模式和策略模式的核心区别与最佳实践在软件设计中，设计模式是解决特定问题的常用方法。工厂模式（FactoryPattern）和策略模式（StrategyPattern）是两种非常重要的设计模式，广泛应用于Java开发中。尽管它们都属于行为设计模式，并且有助于创建灵活、可扩展的代码，但它们的应用场景和核心思想有明显的区别。本文将详细探讨工厂模式和策略模式的核心区别，并结合最佳实践，帮助开发人员在合
  • 80、k8s概念及组件介绍 ly1435678619 kubernetes容器云原生
    一、k8skubernetes:k8s----希腊语，舵手，飞行员1.1、k8s作用：用于自动部署，扩展，管理容器化部署的应用程序。开源（半开源。）k8s的底层语言是由go语言。k8s理解成负责自动化运维管理多个容器化的应用的集群。谷歌基于go语言开发的。1.2、k8s的版本1.18-1.2之间常用的1.20-----docker1.24-------container1.3、k8s的使用场景：1
  • c# #ifdef命令_如何在C＃中使用命令设计模式 cxu0262 设计模式javapythonlinux数据库
    c##ifdef命令设计模式是经过验证的解决方案，用于解决常见的设计问题并减少代码的复杂性。四个群体的设计模式可分为三类：创作性-与对象创作有关的模式结构-与对象组装有关的模式行为-与对象协作和职责分离有关的模式命令设计模式属于行为模式类别。本文探讨了如何在C＃中使用命令设计模式。[开发最佳实践：您应采用的5种方法。•如何使测试自动化与敏捷性和发展性保持一致。•InfoWorld解释了在设备开发时
  • 2024鸿蒙开发面试题 艾勇杰 鸿蒙ArkTSharmonyos华为面试题开发鸿蒙
    1.项目中你写过放截屏功能吗？能具体说说怎么写的吗？答:写过，官方有apisetWindowPrivacyMode设置窗口是否为隐私模式，设置为隐私模式的窗口，窗口内容将无法被截屏或录屏。此接口可用于禁止截屏/录屏的场景。只需要后台给我们标识此页面是否需要截屏，然后设置这个方法即可。2.Image组件加载的图片，如何缓解图片在缩放时的锯齿问题？答：设置图片的插值效果属性Image中的interpo
  • 2023年最新自适应主题懒人网址导航v3.9php源码 818源码资源站 源码下载818资源站源码下载00818.cn前端
    源码简介这个懒人网址导航源码是一个基于PHP+MySQL开发的网址导航系统。该版本是在原有3.8版本的基础上进行了修复和功能增强。我们建议新用户直接使用这个最新版本，放弃旧版本。如果你有二次开发的能力，可以根据更新日志自行进行升级。我们将在后期继续不定期地发布更新，以优化和改进系统。源码预览
  • 深入探索Objective-C的NSOrthography：拼写检查的艺术与科学 2402_85758349 objective-c开发语言macos
    标题：“深入探索Objective-C的NSOrthography：拼写检查的艺术与科学”在软件开发中，拼写检查是一个重要的功能，它帮助用户避免拼写错误，提高文本的准确性和专业性。Objective-C，作为iOS和macOS开发的主要语言之一，提供了NSOrthography类来处理拼写检查。本文将深入探讨NSOrthography的工作原理，并展示如何在实际应用中实现拼写检查功能。1.拼写检查
  • 命令模式的实际应用案例：从电梯控制系统到文本编辑器 勤劳兔码农 命令模式
    命令模式的实际应用案例：从电梯控制系统到文本编辑器引言设计模式是软件工程中解决特定问题的经典方案，它们提供了灵活、可扩展的代码结构，能够在应对复杂系统设计时发挥重要作用。命令模式（CommandPattern）作为行为型设计模式之一，通过将请求封装为对象，使得请求的调用者与执行者解耦，从而实现请求的参数化和可撤销性。在实际应用中，命令模式广泛用于各种系统中，如电梯控制系统和文本编辑器等。本文将详细
  • 基于 Gunicorn、Flask 和 Docker 的 Web 应用开发 勤劳兔码农 gunicornflaskdocker
    基于Gunicorn、Flask和Docker的Web应用开发教程欢迎语欢迎来到基于Gunicorn、Flask和Docker的Web应用开发教程，让我们开始构建你的微服务架构！第一部分：Docker和Flask简介1.1Docker基本概念Docker是一个开源的应用容器引擎，它允许开发者打包他们的应用以及应用的运行环境到一个可移植的容器中。容器可以运行在任何支持Docker的机器上，确保了环境
  • 深入理解命令模式：设计模式中的行为型模式解析 范范0825 eureka微服务云原生
    深入理解命令模式：设计模式中的行为型模式解析1.引言设计模式是软件开发中一种经过实践验证的、解决常见问题的方案。行为型设计模式关注对象间的职责分配和通信方式。命令模式（CommandPattern）作为一种重要的行为型模式，主要用于将请求封装成对象，从而将请求的发起者和处理者解耦。本文将深入解析命令模式的核心概念、实现方式、实际应用以及与其他设计模式的关系。2.命令模式概述命令模式是一种行为型设计
  • python网页展示框架_Python网页框架：Django和Tornado weixin_39832965 python网页展示框架
    原标题：Python网页框架：Django和TornadoPython部落组织翻译，禁止转载，欢迎转发软件开发者杂志，CPOL，2013年10月29日学习Django和Tornado这篇文章的作者是MichaelD'Agosta，也首次被发表在软件开发者杂志的第201308期中。你可以在软件开发者杂志上找到更多文章。前言很久之前，随处可见的是把“服务端页面”放到一起，并将它们和一个数据库连接起来，
  • 深入 Rust 标准库，Rust标准库源代码系统分析 青花科技 rust开发语言后端
    系列文章目录送书第一期《用户画像：平台构建与业务实践》送书活动之抽奖工具的打造《获取博客评论用户抽取幸运中奖者》送书第二期《SpringCloudAlibaba核心技术与实战案例》送书第三期《深入浅出Java虚拟机》送书第四期《AI时代项目经理成长之道》送书第五期《Kubernetes原生微服务开发》文章目录系列文章目录★前言☆一、推荐☆二、内容简介2.1、通过本书能学到什么？☆三、作者简介☆四、
  • 掌握 Rust 中的 YAML 魔法：Serde_yaml 使用指南 訾博ZiBo Rustrust算法服务器
    掌握Rust中的YAML魔法：Serde_yaml使用指南文章目录掌握Rust中的YAML魔法：Serde_yaml使用指南一、简介二、使用场景三、基本使用1、读取和解析YAML文件2、序列化数据结构为YAML3、使用自定义结构体进行反序列化4、从文件流中直接解析四、功能详解1、序列化与反序列化2、数据类型支持五、最佳实践及案例1、错误处理2、性能优化六、总结一、简介Serde_yaml是Rust
  • Python Web 框架：Django, Tornado buptshirly tornadopython
    原文连接https://zhuanlan.zhihu.com/p/25978330DjangoDjango是一个高级的PythonWeb框架，支持快速开发，简洁、实用的设计。如果你正在建一个和电子商务网站相似的应用，那你应该选择用Django框架。它能使你快速完成工作，也不必担心太多的技术选择。它能提供从模版引擎到ORM所需的一切东西。用Django构建你的app的时候，你必须要遵循Django的
  • Spring Boot 创建定时任务 missterzy JAVA框架springbootjava数据库定时任务
    在现代应用程序开发中，定时任务是一个常见的需求。SpringBoot作为一个强大的框架，提供了简单易用的定时任务调度功能。本文将详细介绍如何在SpringBoot中创建和管理定时任务，并提供完整的代码示例。1.什么是定时任务定时任务是指在预定的时间间隔或特定的时间点自动执行的任务。它们常用于执行周期性的数据备份、发送通知、数据清理等操作。常见的定时任务使用场景数据备份日志清理发送定时通知定时数据同
  • 探索Java设计模式：单例模式 放码过来_ 设计模式单例模式java设计模式
    探索Java设计模式：深入理解与实践单例模式在软件开发中，设计模式作为最佳实践的集合，能够帮助我们构建更稳健、可扩展的代码结构。本文将聚焦于Java编程语言中的经典设计模式之一——单例模式，通过简要介绍、实现示例及实际运用等模块，带领读者深入理解并有效运用这一模式。一、简要介绍**单例模式（SingletonPattern）**是一种创建型设计模式，其核心目标是确保一个类在整个应用程序中只存在一个
  • github中多个平台共存 jackyrong github
    在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1） 设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
  • ip地址与整数的相互转换(javascript) alxw4616 JavaScript
    //IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
  • 读书笔记-jquey+数据库+css chengxuyuancsdn htmljqueryoracle
    1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
  • javaSE javaEE javaME == API下载 Array_06 java
    oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
  • shiro入门学习 cugfy javaWeb框架
    声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。 首先配置我们的web.xml代码如下，固定格式，记死就成 <filter>         <filter-name>shiroFilter</filter-name> &nbs
  • Array添加删除方法 357029540 js
         刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除             Array.prototype.del = function(n){
  • navigation bar 更改颜色 张亚雄 IO
    今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。       翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下    
  • unicode转换成中文 adminjun unicode编码转换
      在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成 中文
  • 一站式 Java Web 框架 firefly aijuans Java Web
    Firefly是一个高性能一站式Web框架。 涵盖了web开发的主要技术栈。 包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。 更新日志： 增加自定义系统错误页面功能
  • 设计模式——单例模式 ayaoxinchao 设计模式
    定义          Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”   分析          从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。   &nb
  • Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
    不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。 一、document.formName.item(”itemName”) 问题 问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
  • JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11单元测试
            下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：    
  • [Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
    Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)：   #!/bin/bash #!!!Change the name!!! #The zookeepe
  • 【Spark八十】Spark RDD API二 bit1129 spark
    coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
  • Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
    在modules目录中只有httpd.exp，那些so文件呢？ 我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
  • Java基础-克隆 BrokenDreams java基础
            Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为 克隆。         Java提供了java.lang.
  • 读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
  • HDR图像PS教程集锦&心得 cherishLC PS
    HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。 软件有photomatix和nik hdr efex。 一、教程 叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。 二、心得 1、去除阴影部分的
  • maven-3.3.3 mvn archetype 列表 crabdave ArcheType
    maven-3.3.3 mvn archetype 列表 可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml   [INFO] Scanning for projects... [INFO]                
  • linux shell 中文件编码查看及转换方法 daizj shell中文乱码vim文件编码
    一、查看文件编码。     在打开文件的时候输入:set fileencoding     即可显示文件编码格式。 二、文件编码转换     1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式       &
  • MySQL--binlog日志恢复数据 dcj3sjt126com binlog
    恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002                  
  • 数据库中数据表数据迁移方法 dcj3sjt126com sql
    刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用   下面看看如何使用   语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍       有三张表a、b、c，现在需要从表b
  • Java反转字符串 dyy_gusi java反转字符串
           前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
  • UI设计中我们为什么需要设计动效 gcq511120594 UIlinux
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用
  • JBOSS服务部署端口冲突问题 HogwartsRow java应用服务器jbossserverEJB3
    服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。   1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml   2、./server/default/deploy/jbossweb.sar/server.xml   3、.
  • 第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdbreidstwemproxy
    目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
  • ZooKeeper原理及使用 liyonghui160com
               ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
  • 程序员解决问题的60个策略 pda158 框架工作单元测试
    根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。 良好的单元测试 强制数据库约束 使用输入验证框架 避免未实现的“else”条件 在应用到主程序之前知道如何在孤立的情况下使用   日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
  • Create the Google Play Account sillycat Google
    Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
  • JSP三大指令 vikingwei jsp
    JSP三大指令   一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%>   * pageEncoding和contentType：     > pageEncoding：它
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他