3D开发-AR.js 自定义Marker

最新推荐文章于 2024-08-09 08:06:23 发布
最新推荐文章于 2024-08-09 08:06:23 发布
阅读量1.2k 收藏 4
点赞数
分类专栏： 3D开发 文章标签： AR.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhenAndroid/article/details/92424592
版权
本文介绍了如何使用AR.js库创建自定义Marker。通过AR.js Marker Training，可以上传图片并下载Marker，然后在ARjs/three.js/examples/mobile-performance.html代码中进行修改，以扫描生成的图片并加载自定义3D场景。注意AR.js的图片识别效果受图片特征影响，建议使用特征明显、区块清晰的图片以提高识别率。
摘要由CSDN通过智能技术生成

创建自定义Marker

AR.js Marker Training

    上传一张识别图片，然后下载Marker和及图片。

代码

ARjs/three.js/examples/mobile-performance.html

修改代码

// 修改ArMarkerControls Marker路径

        let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {

最低0.47元/天 解锁文章
zhenAndroid
关注
专栏目录
WebAR开发指南（1）---使用AR.js实现第一个WebAR demo
albertleebob的博客
02-29 3104
关注微信公众号：AIRX社区（国内领先的AI、AR、VR技术学习与交流平台） 前面有一篇文章万字干货介绍WebAR的实现与应用分析了目前流行的WebAR框架并简单的介绍一些实现方法，这个专栏我们具体的来通过一些框架实现WebAR效果。 关于AR.js AR.js是一个轻量级的增强现实类JavaScript库，支持基于标记和位置的增强现实。开发人员可以使用几行HTML将AR特性和功能引入任何网...
JavaScript使用Markers方式添加点
12-14
JavaScript使用Marker方式展现出来，最终加到Markers图层上(非vector)
AR.js专题-自定义Marker
weixin_30516243的博客
10-09 414
创建自定义Marker AR.js Marker Training 上传一张识别图片，然后下载Marker和及图片。 代码 ARjs/three.js/examples/mobile-performance.html 修改代码 // 修改ArMarkerControls Marker路径 let markerControls1 = n...
AR.js：开启网页增强现实的新纪元
最新发布
gitblog_01009的博客
08-09 323
AR.js：开启网页增强现实的新纪元 AR.jsImage tracking, Location Based AR, Marker tracking. All on the Web.项目地址:https://gitcode.com/gh_mirrors/arj/AR.js 项目介绍 AR.js 是一款轻量级的网页增强现实（Augmented Reality, AR）库，由 @jeromeetie...
AR.js自定义标记
jiachun199的博客
08-12 709
1、获取标记 这几行代码什么意思呢，就是一个匹配的规则，匹配的文件是data目录中的Market标识，说白了就是用让摄像头识别这个标记，官方示例给的标记是pattern-hiro,这个标记的来源图片对应着data目录中的images/hiro.png 这张图，怎么用这张图来生成patt.hiro这个标记呢，这时我们需要使用一个SDK工具，微小轻量级的，大家别担心是很重的安装包。这个工具叫artoolkit,就是AR工具箱，可以百度下载，建议下载最新的。 2、自定义标记 安装完成以后，进入到D:\Progr
高德地图JS API 普通点标记Marker
weixin_45511682的博客
05-29 691
AMap.Marker 是高德地图提供的用于在地图上添加点标记的类。通过Marker，开发者可以在地图上放置自定义的图标或默认的标记点，并设置其位置、样式、事件等属性。
AR_painting：这是对AR.js应用程序在图像上显示动画的测试
03-04
2. JavaScript文件（如果存在）：可能用于扩展或自定义AR.js的功能，比如处理用户交互事件、加载和控制3D模型，或者设置动画效果。 3. 图像资源：包括图像标记和其他可能用到的图片素材。图像标记通常是黑白的，...
ar_demo:回购以测试ar.js
03-19
此外，AR.js还支持自定义JavaScript代码来扩展功能，例如响应用户交互或动态加载内容。在"ar_demo-main"目录中，可能包含了这样的自定义脚本文件，用于初始化AR场景、处理追踪事件等。 为了测试这个AR.js demo，...
百度地图自定义marker（图标），layer（覆盖层）
热门推荐
j_bleach的博客
06-21 1万+
概要 本文只要涉及的内容有，web中动态引入百度地图，基于百度地图的本地搜索（公交，地铁，停车场），自定义marker，layer，接入微信内置地图（微信中使用第三方导航）。 效果预览 地图懒加载 本示例应用于小程序内嵌的webview，web开发使用react。由于示例作为项目中的一个不必要模块，不是每次进入都会加载，因此选择在项目确定使用百度地图时，在进行加载。即动态加载百度地图的地图服务资...
markerjs:让您的用户注释和标记图像
05-02
marker.js —让您的用户注释和标记图像 :warning: 已弃用。 marker.js v.1.x已不再维护。 请考虑改用 。 marker.js是一个JavaScript库，用于在您的Web项目中启用图像注释。 用户可以注释和标记图像，您可以保存，共享或以其他方式处理结果。 安装 npm install markerjs 用法 要在项目中启用图像批注，请遵循以下3个简单步骤： 将markerjs.MarkerArea附加到图像； 将回调方法传递给MarkerArea.show()方法； 用户完成后处理结果。 例子 import { MarkerArea } from 'markerjs' ; const m = new MarkerArea ( document . getElementById ( 'imageToAnnotate' ) ) ; m . show ( (
AR识别、图像追踪、AR.js应用插件需求
03-08
增强现实是一种可以在现实世界添加内容的技术。可以应用在多种设备：手持设备(如手机)、耳机、桌面等等。 对于手持设备(通常来说指的是摄像型设备)来说，“现实”就是从一个或多个摄像头捕捉到的影像，在显示到显示屏上时添加一些内容。
js实现百度地图的自定义marker与css3动画的交互
weixin_63454527的博客
11-04 1716
js实现百度地图的自定义marker与css3动画的交互
js添加多marker 高德地图_高德地图自定义炫酷的marker
weixin_42515841的博客
01-07 1365
实现效果大概如下在官方的例子中marker的例子只有如下几种形式编码前起初的设计是准备用一个marker和一个tips来做这个小功能扩展的，但是在做之前我突然发现marker和tips的出现形式貌似没有多大的区别，主要是因为怎么把两者连接起来，中间的那条线该如何实现，怎样做到两条线完美的对接起来，并且和tips关联，因为marker和tips的绘制都需要一个共同的参数经纬度，，，思考。。。。。。权...
AR.js专题-多Marker追踪支持
weixin_30924239的博客
10-09 614
支持2个marker跟踪 代码参考 ARjs/three.js/examples/measure-it.html // 支持追踪两个目标 ////////////////////////////////////////////////////////////////////////////// // markerRoot...
图像追踪、AR识别 、AR.js应用
qq_39951524的博客
03-08 1251
图像追踪、AR识别 、AR.js应用、插件集合
AR.js | 图像跟踪，特征识别触发事件
Nora Taki的博客
06-04 4994
文章目录图像跟踪（Image Tracking） 图像跟踪（Image Tracking） AR.js中提供了图像跟踪（Image Tracking）、基于定位（Location Based）、基于标记（Marker Based） 三种模式。其中图像跟踪模式是通过设备摄像头，扫描图片、绘画、照片等内容，从而定位场景的模式。 其中用到了 自然特征点跟踪（Nature Feature Tracking、NFT） 技术， ...
android ar.js,基于AR.js的WebAR Marker识别体验
weixin_28931559的博客
05-27 325
JavaScript语言：JaveScriptBabelCoffeeScript确定/* 需要浏览器支持webgl和webrtc *//* Android和PC基本OK, iPhone需要升级到iOS11才行 */////////////////////////////////////////////////////////////////////////////////////Init/////...
用AR.js做图片追踪的webAR Demo
qq_28864105的博客
08-11 3265
用AR.js做图片追踪的webAR DemoDemo效果Demo项目地址部署使用页面代码替换想要追踪的图片(1)web版（推荐使用）(2)node版替换模型 Demo效果 可在手机浏览器中打开摄像头，识别特定的图片。 识别成功后显示对应的模型，模型位置会跟踪图片所在的位置，可对模型进行旋转或缩放 提示：以下是本篇文章正文内容，下面案例可供参考 Demo项目地址 https://github.com/a86861636/webAR-demo 项目文件目录 部署使用 手机浏览器打开摄像头需要https
根据X0 Y0 Z0 -51.6776 31.8523 -997.597 -48.5274 23.01 -998.124 -49.3401 27.1488 -989.889 -52.0774 33.8884 -993.546 -40.3329 40.1255 -990.376 -39.5202 35.9868 -998.611 -42.6704 44.829 -998.085 -43.0702 46.8651 -994.033 -62.9651 51.2521 -990.692 -65.6099 57.4425 -995.628 -64.5474 57.1917 -995.733 -62.0485 51.3429 -991.069 -66.2718 56.5688 -995.59 -63.7729 50.7201 -990.926 -58.0463 38.4691 -996.832 -59.4712 37.9542 -996.714 -62.475 47.6367 -990.758 -61.05 48.1514 -990.876 -60.3569 38.6427 -996.614 -66.4552 55.7603 -995.595 -57.797 39.5673 -996.826 -63.8953 56.6849 -995.807 -63.5565 55.7339 -995.863 这些三维坐标点绘制形貌图
06-09
为了绘制这些三维坐标点的形貌图，需要使用三维绘图软件。以下是使用 Python 中的 Matplotlib 和 mpl_toolkits 中的 mplot3d 绘制的示例代码： ```python import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D # 将三维坐标点分别存储在 x、y、z 列表中 x = [-51.6776, -48.5274, -49.3401, -52.0774, -40.3329, -39.5202, -42.6704, -43.0702, -62.9651, -65.6099, -64.5474, -62.0485, -66.2718, -63.7729, -58.0463, -59.4712, -62.475, -61.05, -60.3569, -66.4552, -57.797, -63.8953, -63.5565] y = [31.8523, 23.01, 27.1488, 33.8884, 40.1255, 35.9868, 44.829, 46.8651, 51.2521, 57.4425, 57.1917, 51.3429, 56.5688, 50.7201, 38.4691, 37.9542, 47.6367, 48.1514, 38.6427, 55.7603, 39.5673, 56.6849, 55.7339, 995.863] z = [-997.597, -998.124, -989.889, -993.546, -990.376, -998.611, -998.085, -994.033, -990.692, -995.628, -995.733, -991.069, -995.59, -990.926, -996.832, -996.714, -990.758, -990.876, -996.614, -995.595, -996.826, -995.807, -995.863, -995.863] # 创建 3D 图形对象 fig = plt.figure() ax = fig.add_subplot(111, projection='3d') # 绘制三维散点图 ax.scatter(x, y, z, c='r', marker='o') # 设置坐标轴标签 ax.set_xlabel('X') ax.set_ylabel('Y') ax.set_zlabel('Z') # 显示图形 plt.show() ``` 运行上述代码可以得到绘制的三维形貌图，如下所示： ![三维形貌图](https://i.imgur.com/nx3BQ7L.png)
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值