ARJS、THREEjs做出一个扫码播放视频的效果

最新推荐文章于 2025-06-06 15:05:20 发布
原创 最新推荐文章于 2025-06-06 15:05:20 发布 · 2.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#arjs #javascript #html5

博主近期研究AR.js，认为可实现扫码播放视频效果，还给出了效果图、demo网址（https://www.gdutrex.top/ARjs/threejs/examples/dev.html）及扫描图。

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

最近研究arjs感觉可以搞下扫码播放视频的效果

效果图

在这里插入图片描述

demo网址

https://www.gdutrex.top/ARjs/threejs/examples/dev.html

扫描图在这里插入图片描述

ar.js 追踪图片mark播放视频，并且根据是否识别控制视频播放操作
weixin_43982168的博客
02-08 4778
首先完成了视频纹理的加载，可以持续的播放视频 其次完善了视频播放感受，清除跳跃、跳帧、抖动、每次识别重新播放等现象，不错的感受，可以达到商业效果。 最后，通过通读ar.js代码，终于找到了通过识别进行视频开始播放节点的控制，稍后慢慢完善操作方法。 ...
AR.js打造高效WebAR（three.js+AR.js）
热门推荐
Webglzhang
03-11 5万+
      最近做完一个WebAR的室内导航项目，AR开发部分是基于ar.js做的。ar.js很棒的一处是结合three.js进行3D渲染。当然ar.js都是国外大牛封装开发的，我只是简单分享下向大家介绍下ar.js，并分享下ar.js开发的心得，同时也做了一个小demo。       我们先看一下demo的效果，fps能到60：        接下来我们介绍ar.js，ar.js是git...
AR.JS扫描标识播放视频
weixin_44362941的博客
12-04 1747
AR.JS扫描标识播放视频前言mark标识图片标识通用事件 前言 现在我了解的AR.js扫描有两种 一种是mark标识 一种是图片标识 mark标识是一种方形的图片，有黑色的边框 最小为图片的十分之一 也不知道算不算优点的一方面是在微信打开时播放视频是用的微信的播放器 默认全屏播放不会卡 图片标识就是使用一张图片作为标识，好处是比例随意，长方形，正方形，随意的图片都可以。算是缺点的地方是这个在微信打开时他会将播放器隐藏，然后将其渲染到模型上，就会很卡。 mark标识 生成链接 这个上传图片 然后选择黑框比例
Three.js中AR实现详解并详细介绍基于图像标记模式AR生成的详细步骤
最新发布
警警的博客
06-06 1230
1. AR.js是Three.js实现AR的基石，提供以下核心能力： - 多模式追踪：支持图像标记（Pattern Marker）、自然特征（NFT）、地理位置（Location Based）及平面检测（WebXR）。 - 跨平台性：基于WebGL和WebRTC，兼容iOS/Android/PC主流浏览器，无需安装插件。 - 轻量化：核心库仅200KB（gzip压缩），渲染效率达60fps。
arjs-webpack-boilerplate:通过Webpack5管理的ThreeJS + ARJS项目的静态网站样板
05-17
⑇ARJS webpack v5样板 通过Webpack5管理的ThreeJS + ARJS项目的静态网站样板。 演示版 基于标记的演示 打开此并将此显示在相机上！ 您也可以签出此。 （可能需要刷新页面，仍然需要在此位置进行修复。） 基于NFT（基于图像）的演示 :warning: NFT功能演示已损坏，正在修复 打开此并将此显示给相机！ 您也可以签出此。 站在巨人的肩膀上 感谢 。 我重用了她的Webpack5样板作为此代码的基础。 感谢提供了出色的Web AR插件。 感谢ThreeJS团队将3D魔术带到了网络上。 安装 克隆此仓库并安装纱线。 yarn install 用法 开发服务器 yarn start 基于标记的版本 您可以在localhost:8080查看开发服务器，并使用hiro标记。 或者，您可以从http://localhost:8080/?mode=simul
three.jsAR增强现实包AR.js和aframe（201806）
06-06
three.jsAR增强现实包AR.js和aframe three.js和Physijs最新下载 https://download.csdn.net/download/wsk94/10461987
kalwalt-interactivity-AR:使用Ar.js和Three.js进行的各种实验
04-29
卡尔沃尔特互动游戏 不仅限于和 ，还进行了各种实验。 请注意，其中一些可能无法使用...这是我的笔记本，小应用程序的草图块或我正在测试的代码片段。 NFT和Jsartoolkit5 在存储库中，有一些示例未包含在官方的存储库中。 nftLoader 如果您对AR感兴趣，请尝试使用该实用程序。 您可以使用nftLoader.js库尝试这些示例。 使用nftLoader.js发展和nftLoader.min.js生产。 但是我建议您使用基于和ES6的新库。 网站 您可以访问网站该网站托管在gh页上。 如何在本地运行事物 如果您在控制台中运行了python，则应该运行本地服务器： // Python 2. x python - m SimpleHTTPServer // Python 3. x python - m http . server 或使用node.js安装服务器软件包： n
AR-Test-2:在 React 中使用three.js 实现使用AR.js
05-30
是一个有趣的东西，可用于在网络上创建增强现实 (AR)。 从 2017 年（AR.js 出现的那一年）开始，几乎每个月都会发布关于如何在 10 分钟内使用 AR 创建网站的新文章。 如果您想用一个 HTML 文件创建一个站点，这是...
Webpack5与ThreeJS、ARJS结合的静态网站样板教程
综上所述，arjs-webpack-boilerplate为开发者提供了一个基于Webpack5和ThreeJS框架的开发环境，以实现AR增强现实体验，其中可能包括对NFT的支持。样板旨在帮助开发者快速搭建AR相关的Web项目，尽管它可能还在持续的...
Threejs入门5-plane(画面)
空谷足音的博客
01-04 4156
1.简介 想一想如何在三维坐标系画面？联想到二维平面，同一个平面的多条线形成闭合区间就组成了平面 2.右手坐标系 在Threejs中，坐标和右边的坐标完全一样。x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。 3.画面 效果图： 画个坐标系平面，会画坐标系，画简单平面岂不是更简单(几条线交互形成闭合区间) (1).新建grid.html <!DOCTYPE ht...
【微信小程序】【AR】threejs-miniprogram 安装(76/100）
lichong951的专栏
08-01 4125
AR基础3D渲染引擎安装
threejs-video-cube:一个简单的three.js演示，该演示使用gUM从用户的网络摄像头获取媒体流，然后创建一个多维数据集并将视频作为纹理应用于多维数据集的面Kong
05-23
threejs-video-cube 一个简单的three.js演示，该演示使用gUM从用户的网络摄像头获取媒体流，然后创建一个多维数据集并将视频作为纹理应用于多维数据集的面Kong。 。
使用 threejs 实现三维视频融合
weixin_55800561的博客
09-28 2694
使用 THREE.js 来实现视频融合主要涉及到几个步骤：加载视频作为纹理，创建一个材质（material）使用这个纹理，并将其应用到 3D 对象上。下面是一个基本的示例，展示如何将一个 HTML5元素与 THREE.js 结合使用，以实现实时视频流在 3D 场景中的显示。
【AR.js】使用three.js渲染一个方块
o0o
01-22 2168
说在前面 测试浏览器：Microsoft Edge(PC版本 97.0.1072.55) github库：AR.js AR系列文章：这里 go版本：go version go1.17.3 windows/amd64 three.js版本：r79（版本比较老） 其他：AR.js支持three.js。 效果图 代码 代码注释比较详细了，不再赘述 关于相机内参、外参等知识点可参考【OpenCV&OpenGL&Markerless AR】原理部分+代码 <!DOCTYPE htm
threejs视频融合 webgl
ALLENJIAO的专栏
06-19 1255
threejs 视频融合 增强现实 ar
AR.js专题-入门例子
weixin_30781433的博客
10-09 954
AR.js特性介绍 非常快：即使在旧手机上它也能高效运行 基于Web：这是一个纯Web解决方案，因此无需安装。 完整的javascript基于three.js + jsartoolkit5 开源：它是完全开源的，免费 标准：适用于任何带有webGL和webRTC的手机 AR.js主要基于两个开源项目：three.js和jsartoolkit5，3D场景加载、演示部分是使用thr...
Threejs_纹理_视频
ydk001001的博客
02-07 517
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贴图</title> <style> body { margin: 0; overflow: hidden; /* 隐藏body窗口区域滚动条 */ } </style> <!--引入three.
web平台使用threejs实现三维视频融合的思路
hijunmeng的专栏
05-10 4514
文章目录web平台使用threejs实现三维视频融合的思路案例参考 web平台使用threejs实现三维视频融合的思路 案例 相必大家都看到网上的三维视频融合案例，如这里的https://blog.csdn.net/lxg9305171/article/details/79970009 这里的 https://zhuanlan.zhihu.com/p/92525723 怎么样，第一眼看到是否...
ThreeJs技术交流（4）——Unity3D与ThreeJS、以及在3D场景中添加视频
homula123的博客
12-02 1万+
ThreeJs技术交流（4）——Unity3D与ThreeJS、以及在3D场景中添加视频Unity3D和ThreeJS在3D场景中添加视频基于平面添加视频基于video.js视屏控件添加视频结束语 Unity3D和ThreeJS 最近我正在学习Unity3D，ThreeJS的文章可能更新地会比较慢一点。其实Unity3D和ThreeJS既有相同点又有很大的区别，前者是世界首屈一指的3D游戏引擎，展...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值