WebAR 开发基本步骤

最新推荐文章于 2025-07-04 21:12:00 发布
最新推荐文章于 2025-07-04 21:12:00 发布
阅读量2.1k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： WebAR 文章标签： WebAR
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41814169/article/details/86575473
本文介绍了WebAR开发的基本步骤，包括在EasyAR官网开通WebAR图库，获取秘钥三要素，运行sample并在sample中填充识别信息，以及部署支持HTTPS协议的服务器以实现在浏览器上使用摄像头进行AR体验。

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

EasyAR网址：https://www.easyar.cn/view/developCenter.html#license

1. 开通WebAR 图库

进入 开发中心 - - 新建云识别图

WebAR 提供28 天的试用时间 ，你可以根据区域、扫面次数、期限来选择合适你的图库

 

创建好之后，会得到你的秘钥三要素（Key，secret，server）

 

最低0.47元/天 解锁文章

200万优质内容无限畅学
WebAR｜前端开发者开发WebAR资源最全大汇总
albertleebob的博客
06-01 9307
关于WebAR WebAR就是在Web端集成AR的功能。WebAR使用WebRTC，WebGL和现代传感器API的组合技术，通过Web浏览器提供对基于Web的增强现实的访问与实现。 WebAR优缺点 WebAR可以轻松地运行在Android、iOS、Windows、Mac系统的Web浏览器上，无需APP，轻松实现跨平台。 WebAR 可以实现扫描识别图呈现3D动画模型、视频、图片、文字、UI按钮等效果，并且支持3D模型交互。 WebAR主要是以URL的格式传播，符合微信等社交媒体信息流动的基本技术
WebAR 开发平台使用和功能摘要[8th wall]
博客
01-12 1249
WebAR 开发平台使用和功能摘要[8th wall]
AR 如何改变我们构建网站的方式
最新发布
粉丝们务必加入微信粉丝群
07-04 928
还记得你在网页上逛商城时，点击一副墨镜，然后镜头打开，它就自动出现在你脸上的那一瞬间吗？前端AI·探索：涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习，点击原文了解更多详情。AR（增强现实）是将虚拟元素叠加在现实世界的技术，而 Web AR 则让这一切直接在浏览器中发生 —— 无需下载 App、无需特定设备。相较 A-Frame，WebXR 灵活性更强，但开发成本也更高，适合高级项目。Web 正在进入三维世界，变得更沉浸、更交互、更真实。
网页增强现实技术（Web_AR）的实现与应用
weixin_35592186的博客
09-19 2957
本文还有配套的精品资源，点击获取 简介：Web_AR利用JavaScript等前端编程语言和WebGL技术，将虚拟信息与现实世界结合，提供新的交互体验。这种技术不依赖特定应用或设备，用户可通过浏览器直接访问AR内容，广泛应用于教育、娱乐、零售等多个领域。本文章将探讨如何利用AR.js、Aframe.js和Three.js等JavaScript库来实现Web AR，并结合地理...
快速搭建一个Web AR应用
10-23 3432
制作AR的应用，也有很多的软件，例如Unity的AR foundation，其融合了谷歌的AR Core和苹果的AR kit，可以方便的制作跨平台的AR应用。要想获得好的AR的效果，对于手机的硬件也是有一定的要求的，因为手机需要进行校正，使得能准确的识别物体的表面，以更好的放置AR模型。图片越复杂，其包括的轮廓线条就越丰富，例如直线，转角，弧形等等，这样就能更准确的进行定位，另外图片包括的像素越多就越好，所以我们尽量不要对手机拍摄的图片进行缩小分辨率的操作。我这里基于图像追踪来搭建一个室内的AR应用。
Web 前端中的增强现实（AR）开发技术
yydjtcy的博客
12-21 1864
Web 前端中的增强现实（AR）开发技术 本文转自https://geekplux.com/2018/01/18/augmented-reality-development-tech-in-web-frontend.html 本文力求把目前前端方向的 AR 技术都罗列一遍，细节不赘述（保证文章篇幅不过长），只做概括和科普（因此文章中的链接很多）. Web AR 初音未来Web AR 初音未来 AR...
探索webAR开发——从新手到实践
通过本文的介绍，我们已经了解了webAR的基本概念、关键技术以及使用easyAR实现手机AR的方法。可以看出，尽管webAR的初始学习曲线可能较陡，但其带来的便捷性和扩展性是显而易见的。对于希望快速上手webAR的开发者来...
如何在Unity中使用WebXR开发AR/VR应用
albertleebob的博客
05-08 8549
WebXR是一种具有巨大潜力的技术，但是目前，它提供的开发工具比独立VR开发差得多，在独立VR开发中，我们使用Unity和Unreal Engine。Mozilla 为沉浸式Web做了大量工作，为Unity开发一个WebXR导出器使所有Unity开发人员都能使用他们已经熟知的工具创建WebXR体验。该项目可以追溯到2年前，但是最近WebXR插件已得到改进和更新。 以下内容由公众号：AIRX社区（...
Unity 引擎实现 WebXR 开发与 Web 端 VR 应用的全面指南
小宝哥Code的专栏
01-19 1830
WebXR 是由 W3C (World Wide Web Consortium) 推出的开放标准，用于在 Web 浏览器中支持虚拟现实 (VR) 和增强现实 (AR) 应用。
WebAR开发笔记
qq_38695918的博客
03-20 537
关键步骤 *这里的js文件已经解决了摄像头前置后置问题（AR.js） 访问网址体验https://www.ljclass.com/AR/Cu(OH)2.html 1.渲染器关键代码 var renderer= new THREE.WebGLRenderer({ antialias: true, /...
小白向：webAR的制作过程
weixin_44319022的博客
08-31 367
小白向：webAR的制作过程 文章目录小白向：webAR的制作过程前言一、为什么选择webAR？二、代码详解1.JS代码2.HTML代码三、代码运行存在的问题 前言 本文章的内容是关于作者尝试开发webAR的经历和过程。关于作者为何想要尝试webAR，这还得从作者大学的录取通知书说起。作者下学期大三，有幸看到大一新生的录取通知书。相比于网上看到的花里胡哨的其他学校的录取通知书----又是芯片又是纸雕，咱学校的录取通知书可谓朴素至极----只有一些笔啊纸啊卡片啊什么的。于是我想可以给我们学校的录取通知书里放
新手之使用webAR实现手机AR
10-13
easyAR出了webAR,正好是老板感兴趣的内容，可是我一个学UE4不懂网页的人要去研究，初始难度就感觉不是一般的大，本文中记录我的研究史
基于Unity简单制作AR流程
06-01
一个基于Unity和高通(Vuforia)制作入门级AR的教程文档
AR项目的简单实现过程
qq_30886061的博客
07-20 7432
第一步，在http://developer.vuforia.com网页注册账号登录后 点击develop——License Manager——Add License Key加一个之后点击自己加上的，图中为class然后出现 这个在后面有用。 第二步 点击create创建后，上传图片然后点击自己所创建的database下载所需图片 根据星数显示电脑是否能准确识别，4到5星最
Unity3D开发WebAR，可以在手机上面使用
qq_44874004的博客
12-18 4334
在手机浏览器使用unity开发ar的一种办法，借助webgl，减少安装app的麻烦。后期考虑发布到微信小程序上面，但是微信小程序自带开发AR的框架，使用unity去开发反而比较麻烦。
WebAR也是元宇宙的一种? #geenee.ar 快速上手制作 AR 应用
shadowcz007的博客
05-04 1175
MixlabAR & VR 是构建元宇宙应用的热点 “接口”。前期推文介绍了 Web 端的快捷高效的 VR 创作工具 Styly ，AR 创作也有类似的简易工具吗？知识库有社群成员推荐了一款 Web AR工具Geenee。该工具是一个无代码平台，即使是非技术创作者也可以快速、经济且轻松地构建和发布 webAR 体验项目。GeeneeGeenee 是一个低代码...
web AR探索和总结
weixin_34268843的博客
11-14 440
腾讯DeepOcean原创文章：dopro.io/web-ar.html 导语 AR浪潮正滚滚而来，Web 浏览器作为人们最唾手可得的人机交互终端，AR技术又有那些进展，下面作者将自己在项目内AR的探索总结了一下，和大家分享。 AR实现原理分析三要素： 1.摄像头的调用 2.视频流内容识别 3.虚拟物体的叠加在画面上 技术实现一：摄像头的调用 1.使用getUsermedia获取摄像头内容 2....
做webAR你一般用哪些框架？
王铁柱666的博客
03-07 177
在选择框架时，需要根据具体的项目需求、团队技术栈和个人喜好来决定。例如，如果项目需求复杂且规模较大，Angular可能是一个不错的选择；而对于追求简洁易用的开发者来说，Vue.js可能是一个理想的选择。此外，在WebAR开发中，还可能需要结合其他技术和工具，如WebGL、Three.js等，来实现更丰富的3D效果和交互功能。因此，在选择框架时，也需要考虑其与这些技术和工具的兼容性及整合难度。在WebAR（增强现实）前端开发中，常用的框架主要包括Angular、React和Vue.js。
你有做过webAR吗？说说你的理解
王铁柱666的博客
03-07 296
WebGL是一种在浏览器中创建3D图形的JavaScript API，而Three.js是基于WebGL的JavaScript库，可以简化3D图形的创建。：不同的浏览器和设备可能对WebGL和AR技术的支持程度不同，因此前端开发者需要确保WebAR应用在各种环境中都能正常运行。：WebAR应用对性能要求较高，因此前端开发者需要关注页面的加载速度、渲染效率等方面，以确保用户能够流畅地体验AR效果。：为了让用户更好地体验AR效果，前端开发者需要设计直观、易用的用户界面，并处理用户的交互操作，如点击、拖拽等。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值