AR小白入门指南：从零开始开发增强现实应用

优质文章学习记录

— 9 min read
AR小白入门指南：从零开始开发增强现实应用

文章目录

在这里插入图片描述

增强现实(AR)技术正在改变我们与数字世界互动的方式。对于初学者来说，AR开发可能看起来复杂，但实际上通过现代框架和工具，入门门槛已经大大降低。本文将带你从零开始，通过代码示例快速掌握AR开发基础。

一、AR技术基础与核心原理

1.1 什么是AR？

  • 定义：将虚拟信息（3D模型、文字、声音等）叠加到真实场景中，实现虚实融合的交互体验。
  • 典型应用场景：
    • 零售：虚拟试衣、家具摆放预览（如IKEA Place）
    • 教育：3D解剖模型、历史场景重现（如Google Expeditions）
    • 工业：设备维修指导、远程协作（如Microsoft HoloLens 2）
  • 与VR/MR的区别：
    • VR（虚拟现实）：完全沉浸虚拟环境（如Oculus Quest）
    • MR（混合现实）：虚拟与现实深度交互（如HoloLens 2）

1.2 AR技术三大核心原理

  1. 环境感知与追踪
    • SLAM技术（即时定位与地图构建）：通过摄像头实时构建环境3D地图，实现稳定追踪。
    • 平面检测：识别水平/垂直表面（如地面、桌面），为虚拟物体提供放置参考。
    • 图像识别：标记追踪（如扫描二维码触发AR内容）或物体识别（如识别家具类型）。
  2. 虚实融合渲染
    • 空间锚点：将虚拟物体固定在真实世界的特定位置（如AR导航箭头固定在道路前方）。
    • 光照估计：调整虚拟物体的光照效果，使其与真实环境一致（如阴影、反光）。
  3. 人机交互设计
    • 手势识别：通过摄像头捕捉手势动作（如抓取、缩放虚拟物体）。
    • 语音交互：结合语音指令控制AR内容（如“显示详细参数”）。
    • 触觉反馈：通过振动或力反馈增强沉浸感（如AR游戏中的震动效果）。

二、开发环境准备

1. 主流AR开发引擎

工具名称优势适用场景
Unity + AR Foundation跨平台支持（iOS/Android/HoloLens）游戏、教育、工业AR应用
Unreal Engine高画质渲染，适合复杂3D场景影视级AR体验、建筑可视化
WebXR无需安装APP，浏览器直接运行轻量级AR展示、营销活动

2. 平台专用SDK

  • Apple ARKit（iOS）：
    • 特色功能：人脸追踪、环境光估计、人物遮挡（虚拟物体被真实人物遮挡）。
    • 开发语言：Swift/Objective-C。
  • Google ARCore（Android）：
    • 特色功能：云锚点（多人共享AR空间）、深度API（更真实的遮挡效果）。
    • 开发语言：Java/Kotlin。
  • 华为AR Engine（国产设备）：
    • 特色功能：SLAM 2.0（动态环境追踪）、手部骨骼追踪。

3. WebAR快速入门(使用AR.js)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>AR.js 基础示例</title><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe.min.js"></script><scriptsrc="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script></head><bodystyle="margin: 0;overflow: hidden;"><a-sceneembeddedarjs="sourceType: webcam; detectionMode: mono_and_matrix;"><!-- 基于图像标记的AR --><a-nfttype="nft"url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/data/images/hiro.pat"smooth="true"><a-entityposition="0 0.5 0"gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/jeromeetienne/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"scale="0.5 0.5 0.5"></a-entity></a-nft><a-entitycamera></a-entity></a-scene></body></html>

4. Android ARCore开发(Java示例)

添加依赖
// app/build.gradle dependencies { implementation 'com.google.ar:core:1.44.0' implementation 'com.google.ar.sceneform:core:1.17.1' implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.17.1' }
基础AR场景代码
publicclassArActivityextendsAppCompatActivity{privateArFragment arFragment;privateModelRenderable andyRenderable;@OverrideprotectedvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_ar); arFragment =(ArFragment)getSupportFragmentManager().findFragmentById(R.id.ar_fragment);setupModel();setupPlane();}privatevoidsetupModel(){ModelRenderable.builder().setSource(this,Uri.parse("andy.sfb"))// 3D模型文件.build().thenAccept(renderable -> andyRenderable = renderable).exceptionally(throwable ->{Toast.makeText(this,"加载模型失败",Toast.LENGTH_LONG).show();returnnull;});}privatevoidsetupPlane(){ arFragment.setOnTapArPlaneListener((hitResult, plane, motionEvent)->{if(andyRenderable ==null){return;}// 创建锚点并放置模型Anchor anchor = hitResult.createAnchor();AnchorNode anchorNode =newAnchorNode(anchor); anchorNode.setParent(arFragment.getArSceneView().getScene());// 创建模型节点TransformableNode andy =newTransformableNode(arFragment.getTransformationSystem()); andy.setParent(anchorNode); andy.setRenderable(andyRenderable); andy.select();});}}
布局文件
<!-- activity_ar.xml --><fragmentandroid:id="@+id/ar_fragment"android:name="com.google.ar.sceneform.ux.ArFragment"android:layout_width="match_parent"android:layout_height="match_parent"/>

5. iOS ARKit开发(Swift示例)

基础AR场景设置
importUIKitimportARKitclassViewController:UIViewController,ARSessionDelegate{@IBOutletvar sceneView:ARSCNView!overridefuncviewDidLoad(){super.viewDidLoad() sceneView.delegate =self// 添加手势识别用于放置物体let tapGesture =UITapGestureRecognizer(target:self, action: #selector(handleTap(_:))) sceneView.addGestureRecognizer(tapGesture)}overridefuncviewWillAppear(_ animated:Bool){super.viewWillAppear(animated)// 创建AR会话配置let configuration =ARWorldTrackingConfiguration() configuration.planeDetection =[.horizontal,.vertical]// 检测水平和垂直平面 sceneView.session.run(configuration)}@objcfunchandleTap(_ sender:UITapGestureRecognizer){guardlet sceneView = sender.view as?ARSCNViewelse{return}let touchLocation = sender.location(in: sceneView)// 执行射线检测查找点击位置的3D点let results = sceneView.hitTest(touchLocation, types:[.existingPlaneUsingExtent])iflet hitResult = results.first{// 创建3D模型节点let boxNode =SCNNode(geometry:SCNBox(width:0.1, height:0.1, length:0.1, chamferRadius:0)) boxNode.geometry?.firstMaterial?.diffuse.contents =UIColor.blue // 将模型放置在检测到的平面上 boxNode.position =SCNVector3( x: hitResult.worldTransform.columns.3.x, y: hitResult.worldTransform.columns.3.y +Float(0.1/2),// 调整Y位置使盒子在平面上 z: hitResult.worldTransform.columns.3.z ) sceneView.scene.rootNode.addChildNode(boxNode)}}}

6. Unity + AR Foundation跨平台方案

1. 创建新项目并安装AR Foundation
  1. 新建3D Unity项目
  2. 通过Package Manager安装：
    • AR Foundation
    • ARCore XR Plugin (Android)
    • ARKit XR Plugin (iOS)
2. 基础AR场景设置
usingUnityEngine;usingUnityEngine.XR.ARFoundation;usingUnityEngine.XR.ARSubsystems;publicclassARPlaceObject:MonoBehaviour{publicGameObject objectToPlace;// 要放置的3D对象privateARRaycastManager raycastManager;privateGameObject placedObject;voidStart(){ raycastManager =GetComponent<ARRaycastManager>();}voidUpdate(){if(Input.touchCount >0&& Input.GetTouch(0).phase == TouchPhase.Began){if(placedObject ==null){PlaceObject();}}}voidPlaceObject(){List<ARRaycastHit> hits =newList<ARRaycastHit>(); raycastManager.Raycast(Input.GetTouch(0).position, hits, TrackableType.PlaneWithinPolygon);if(hits.Count >0){// 创建锚点ARAnchor anchor = hits[0].trackable.CreateAnchor(hits[0].pose);// 实例化对象并设置为锚点的子对象 placedObject =Instantiate(objectToPlace, anchor.transform);}}}

三、AR开发核心概念

1. 坐标系与锚点

  • 世界坐标系：以设备启动AR时的位置为原点
  • 锚点(Anchor)：固定在现实世界中的参考点
  • 局部坐标系：相对于锚点的坐标系

2. 平面检测

// Android ARCore示例Config config =newConfig(); config.setPlaneFindingMode(Config.PlaneFindingMode.HORIZONTAL_AND_VERTICAL); session.configure(config);
// iOS ARKit示例let configuration =ARWorldTrackingConfiguration() configuration.planeDetection =[.horizontal,.vertical]

3. 光照估计

// Unity AR Foundation示例publicclassARLighting:MonoBehaviour{privateLight mainLight;privateAREnvironmentProbeManager environmentProbeManager;voidStart(){ mainLight =GetComponent<Light>(); environmentProbeManager =GetComponent<AREnvironmentProbeManager>();}voidUpdate(){if(ARSession.state == ARSessionState.SessionTracking){// 获取环境光照强度var lightingEstimate = ARSession.origin?.lightEstimate;if(lightingEstimate !=null){ mainLight.intensity = lightingEstimate.averageBrightness; mainLight.colorTemperature = lightingEstimate.averageColorTemperature;}}}}

四、常见问题解决

1. 跟踪丢失问题

  • 原因：光照不足、特征点太少、快速移动
  • 解决方案：
// Android ARCore示例@OverridepublicvoidonSessionPause(){if(session !=null){// 暂停时保存跟踪状态 session.pause();}}@OverridepublicvoidonSessionResume(){if(session !=null){try{ session.resume();}catch(CameraNotAvailableException e){// 处理相机不可用情况}}}

2. 性能优化技巧

  • 减少多边形数量：使用低多边形模型
  • 合理使用光照：避免过多动态光源
  • 限制检测范围：只检测需要的平面类型
  • 使用LOD(细节层次)技术

五、进阶学习资源

  1. 官方文档：
  2. 开源项目：
  3. 3D模型资源：

六、第一个AR应用开发路线图

  1. 第1周：环境搭建与基础概念学习
    • 安装开发工具
    • 运行官方示例
    • 理解坐标系和锚点概念
  2. 第2周：实现基础AR功能
    • 平面检测与放置
    • 简单3D模型加载
    • 基本交互实现
  3. 第3周：添加进阶功能
    • 光照估计
    • 图像识别
    • 简单动画效果
  4. 第4周：优化与发布
    • 性能优化
    • 跨平台适配
    • 应用打包与发布

留个悬念，后面我们接着一起学！

AR开发是一个充满创意的领域，通过现代框架和工具，初学者可以快速上手并创建出令人印象深刻的增强现实体验。从简单的平面检测到复杂的环境交互，每一步进步都能带来新的可能性。希望本文提供的代码示例和开发路线能帮助你顺利开启AR开发之旅！

记住，AR开发的关键在于不断实践和尝试。从简单的立方体开始，逐步添加更复杂的功能，很快你就能创建出自己的AR应用了。祝你开发愉快！

Read more

B站PC端web自动开启字幕脚本（2026新版适配）

B站自动字幕用户脚本：快捷键开关 + 自动开启字幕（2026新版适配） 作者：Apixus 更新日期：2026年3月5日 项目地址：GitHub仓库 一、脚本介绍 你是否经常在B站看视频时反复手动开启字幕？是否希望切换视频时字幕能自动开启？ 这个用户脚本就是为了解决这些问题而开发的。 B站自动字幕脚本 提供了以下功能： * 🎯 快捷键控制：按 C 键快速开启或关闭字幕 * 🔄 自动开启：切换分P、点击推荐视频时自动打开字幕 * 🆕  2026新版适配：专为B站最新版播放器优化 * ⚡ 性能优化：智能监听，告别卡顿轮询 * 🛡️ 防冲突：自动识别输入框，避免误触 二、适用页面 * 普通视频页：https://www.bilibili.com/video/* * 播放列表页：https://www.bilibili.com/list/* 支持普通视频页、番剧页、播放列表页等常见场景。 三、

CVE-2026-21962漏洞利用工具：Oracle WebLogic代理插件未授权RCE检测与利用

CVE-2026-21962 - Oracle WebLogic Server Proxy Plug-In RCE 项目描述 该项目提供了一个针对Oracle WebLogic Server代理插件（Proxy Plug-In）中一个关键安全漏洞（CVE-2026-21962）的漏洞利用概念验证（PoC）脚本。该漏洞允许未经验证的远程攻击者通过HTTP协议在受影响的服务器上执行任意操作系统命令，风险等级极高（CVSS 10.0）。 影响组件： * Oracle HTTP Server（版本12.2.1.4.0、14.1.1.0.0、14.1.2.0.0） * Oracle WebLogic Server代理插件（用于Apache HTTP Server和Microsoft IIS）
后端代码不用写了？前端操作数据库？一文精通Supabase，实战教程+本地部署

后端代码不用写了？前端操作数据库？一文精通Supabase，实战教程+本地部署

视频版：https://www.bilibili.com/video/BV1ZJsBznEt3 2025年最火的后端开源项目那必须是Supabase。Supabase是一个开源的后端级服务框架，在强大的PostgreSQL数据库的基础上，封装了用户认证、文件存储、可视化的运维面板等功能，为开发者提供了一整套开箱即用的后端基础设施。Supabase在Github上面有恐怖的9万star，这已经是整个Github上面最顶级的开源项目之一了。 总的来说，Supabase为开发者提供了三大部分的能力：后端、前端与免费的云服务。Supabase在后端提供数据库、文件存储、边缘函数、用户鉴权等各种基础设施。在前端方面，Supabase提供客户端SDK，可以将任何一个前端框架，比如React, Vue，甚至手机APP，用几行代码就可以轻松接入后端。 Supabase是一个完全开源免费的项目，我们可以使用源代码或者docker镜像，自己部署一个Supabase的完整实例。如果懒得自己部署，Supabase的官方还提供一个云服务的版本，我们只需要注册一个账户，就能立即获得一个免费的Supabase
【前端地图】地图开发基础概念——地图服务类型（矢量图、卫星图、地形图）、WGS84 / GCJ-02 / BD09 坐标系、地图 SDK 简介

【前端地图】地图开发基础概念——地图服务类型（矢量图、卫星图、地形图）、WGS84 / GCJ-02 / BD09 坐标系、地图 SDK 简介

🌍第1节 | 地图开发基础概念——地图服务类型（矢量图、卫星图、地形图）、WGS84 / GCJ-02 / BD09 坐标系、地图 SDK 简介 🎯 学习目标 老曹说：“别急着敲代码，先搞懂地图是个啥玩意儿！不然你画个圈都可能画歪。” 1. 🧠 理解地图服务的基本类型及其应用场景 2. 🔍 掌握 WGS84、GCJ-02、BD09 三大坐标系的区别与转换原理 3. 🛠️ 熟悉主流地图 SDK 的核心功能与适用场景 4. 🧩 构建对地图开发的整体认知框架 🧠 引言：地图不是纸，是数据！ 你以为地图就是一张平面图？Too young too simple！现代前端地图开发本质上是对空间数据的可视化与交互处理。它融合了地理信息系统（GIS）、计算机图形学、前端工程化等多个领域的知识。 老曹吐槽时间： “有人问我为啥地图开发这么难？我说：因为你不仅要会前端，还得懂地球科学！