当前位置：首页 > article >正文

Three.js中AR实现详解并详细介绍基于图像标记模式AR生成的详细步骤

article 2025/6/9 6:58:41

文档地址

Three.js中AR实现详解

以下是Three.js中实现AR功能的详细解析，涵盖技术原理、实现步骤、核心组件及优化策略：

🧩 一、技术基础

AR.js框架的核心作用

AR.js是Three.js实现AR的基石，提供以下核心能力：

多模式追踪：支持图像标记（Pattern Marker）、自然特征（NFT）、地理位置（Location Based）及平面检测（WebXR）。
跨平台性：基于WebGL和WebRTC，兼容iOS/Android/PC主流浏览器，无需安装插件。
轻量化：核心库仅200KB（gzip压缩），渲染效率达60fps。

Three.js与AR.js的协作关系

Three.js负责3D场景渲染，AR.js处理现实世界追踪与虚拟对象对齐：
在这里插入图片描述

⚙️ 二、实现步骤详解

步骤1：环境搭建

引入依赖库

      <!-- 使用A-Frame简化开发（推荐） --><script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script><script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script><!-- 或Three.js原生集成 --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script src="https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar.js"></script>

启动本地服务器

   使用http-server避免跨域问题：npm install -g http-serverhttp-server -o

步骤2：标记生成与模型准备

创建图像标记（.patt文件）

工具：https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

要求：正方形PNG（≥512×512），高对比度+非对称图案（示例：）

操作：上传图像 → 设置Pattern Ratio=0.7 → 下载.patt文件
准备3D模型

格式：GLTF（支持动画/PBR材质）或OBJ

优化：面数≤10万三角面，纹理≤2MB

工具：Blender建模或https://sketchfab.com/下载免费模型

步骤3：场景集成

方案A：A-Frame声明式开发（快速入门）

<a-scene embedded arjs><a-marker type="pattern" url="assets/marker.patt"    <!-- 替换为你的.patt路径 -->
<a-entity gltf-model="assets/model.glb" scale="0.5 0.5 0.5"position="0 0.5 0"       <!-- 模型悬浮高度 -->></a-entity></a-marker><a-entity camera></a-entity>
</a-scene>

方案B：Three.js编程式开发（灵活控制）

// 初始化场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 100);
scene.add(camera);// 配置AR追踪
const arToolkitContext = new THREEx.ArToolkitContext({cameraParametersUrl: 'https://raw.githubusercontent.com/AR-js-org/AR.js/master/data/data/camera_para.dat',detectionMode: 'mono'
});
arToolkitContext.init(() => camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix()));// 绑定标记与模型
const markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {type: 'pattern',patternUrl: 'assets/marker.patt'
});
const model = await new GLTFLoader().loadAsync('assets/model.glb');
scene.add(model.scene);

步骤4：交互与动画增强

模型动画控制

     model.animations.forEach(clip => {const mixer = new THREE.AnimationMixer(model.scene);mixer.clipAction(clip).play();});用户交互事件  // 点击模型旋转window.addEventListener('click', () => {raycaster.setFromCamera(mouse, camera);const intersects = raycaster.intersectObject(model.scene);if (intersects.length) model.scene.rotation.y += Math.PI/2;});

🚀 三、核心优化策略

在这里插入图片描述

🌐 四、应用场景案例

教育领域

生物课本叠加3D细胞模型（NFT自然特征追踪）

电商展示

-家具AR预览（WebXR平面检测 + 物理碰撞模拟）

工业维修

设备拆解指引（多标记协同定位 + 交互动画）

💎 总结

在这里插入图片描述

完整项目示例参考：https://github.com/AR-js-org/AR.js 或 https://aframe.io/blog/webvr-ar-js/

在这里插入图片描述

图像标记模式patt文件生成详解

以下是利用一张图片生成 .patt 文件并关联三维模型的完整步骤详解，结合 AR.js 框架和 3D 模型处理技术实现：

🔧 一、原理简述

.patt 是 AR.js 的图像标记模式文件，通过识别物理图像（如打印的标记图）触发 AR 内容。流程分三步：

图像预处理 → 生成 .patt 文件
3D 模型准备 → 导出兼容格式（如 GLTF、OBJ）
AR 场景集成 → 将模型绑定到标记

✅ 技术栈：AR.js（图像识别） + Three.js（3D 渲染）

🖼️ 二、详细步骤

步骤 1：准备源图像（生成 .patt 的关键）

在这里插入图片描述

步骤 2：生成 .patt 文件

访问在线工具：https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
在这里插入图片描述

步骤 3：准备 3D 模型

模型来源（三选一）：
自定义建模：
在这里插入图片描述

步骤 4：集成到 AR.js 场景

<!DOCTYPE html>
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body><a-scene embedded arjs="trackingMethod: best;"><!-- 绑定 .patt 文件 --><a-marker type="pattern" url="path/to/your-pattern.patt"  <!-- 替换为你的 .patt 路径 -->
<!-- 关联 3D 模型 --><a-entity gltf-model="path/to/model.glb" scale="0.5 0.5 0.5"position="0 0.5 0"  <!-- 模型悬浮高度 -->></a-entity></a-marker><a-entity camera></a-entity></a-scene>
</body>

⚠️ 关键配置：

trackingMethod: best：自动选择最佳追踪模式（优先 WebXR）

必须 HTTPS 环境（Chrome 要求摄像头权限）

⚙️ 三、调试与优化技巧

在这里插入图片描述

高级功能扩展

多标记互动：

<a-marker type="pattern" url="marker1.patt">...</a-marker>

…

事件交互（点击模型触发动画）：

      AFRAME.registerComponent('click-handler', {init: function () {this.el.addEventListener('click', () => {this.el.setAttribute('animation', 'property: rotation; to: 0 360 0; loop: true');});
});

光照适配：

<a-entity light="type: ambient; intensity: 0.8"></a-entity>

💎 四、工具与资源汇总
在这里插入图片描述

🌟 最佳实践：

打印标记时使用哑光材质纸张（减少反光干扰）

复杂场景优先用 GLTF 格式（支持动画、PBR材质）

调试工具：Chrome 手机模拟器 + AR.js 控制台日志

通过以上步骤，即可实现从图片生成 .patt 到关联 3D 模型的完整 AR 体验。深入技术细节可参考
https://ar-js-org.github.io/AR.js-Docs/。

Three.js中AR实现详解并详细介绍基于图像标记模式AR生成的详细步骤

文档地址 Three.js中AR实现详解以下是Three.js中实现AR功能的详细解析，涵盖技术原理、实现步骤、核心组件及优化策略： 🧩 一、技术基础 AR.js框架的核心作用 AR.js是Three.js实现AR的基石，提供以下核心能力： 多模…...

编程日记 2025/6/9 6:58:41

CSS高级技巧及新增属性

CSS高级技巧及新增属性 jarringslee 文章目录 CSS高级技巧及新增属性精灵图 Sprite字体图标 iconfontCSS几何图形的写法更改鼠标样式更改表单轮廓取消文本域的拖拽行内块元素的垂直居中对齐溢出文字处理 CSS布局技巧CSS5新增内容及其他属性新增选择器新增基础属性及其他属性ca…...

编程日记 2025/6/9 6:57:24

GeoBoundaries下载行政区划边界数据（提供中国资源shapefile）

要下载山东省济南市各个区的行政区划边界数据，你可以通过 geoBoundaries 提供的数据来实现。下面是详细步骤，包括网页操作和可选的 Python 自动化方式。目录 ✅ 一、通过 geoBoundaries 官网手动下载1. 打开官网：2. 查找中国数据&#xff1a…...

编程日记 2025/6/9 6:56:20

《深入理解 Nacos 集群与 Raft 协议》系列四：日志复制机制：Raft 如何确保提交可靠且幂等

《深入理解 Nacos 集群与 Raft 协议》系列大家好，我是G探险者！ 在前几篇中我们介绍了选主与日志对比机制，它们保证了“谁能成为 Leader”以及“Leader 的日志是否可靠”。而当 Leader 已选定，系统需要把客户端的写请求写入所…...

编程日记 2025/6/9 6:55:15

大模型如何选型？嵌入模型如何选型？

欢迎来到啾啾的博客🐱。记录学习点滴。分享工作思考和实用技巧，偶尔也分享一些杂谈💬。有很多很多不足的地方，欢迎评论交流，感谢您的阅读和评论😄。目录引言模型优劣认知与模型选择大模型（L…...

编程日记 2025/6/9 6:54:03

float转换为整型过程中关于小数部分的处理

在大多数编程语言中，将 float 类型转换为整型时，小数部分不会自动进行四舍五入，而是会直接截断（即丢弃小数部分，仅保留整数部分）。具体行为可能因语言而异，以下是常见语言的示例： 1.…...

编程日记 2025/6/9 6:52:54

开源大模型网关：One API实现主流AI模型API的统一管理与分发

以下是对One API的简单介绍： One API是一个使用go语言开发的大语言模型 API 管理与分发系统支持Docker一键快速部署，且资源占用小，高性能开箱支持多平台大模型快速接入，包括OpenAI、Gemini、xAI、Grop、Anthropic Claude、Ollama…...

编程日记 2025/6/9 6:51:51

Java线程工厂：定制线程的利器

在Java中，线程工厂（Thread Factory）是一个创建新线程的工厂。它提供了一种方式，允许你在创建线程时定制线程的属性，比如设置线程名称、线程的优先级、守护线程属性等。线程工厂的主要目的是将线程的创建逻辑从使用线…...

编程日记 2025/6/9 6:50:49

智慧充电：新能源汽车智慧充电桩的发展前景受哪些因素影响？

全球能源结构转型与碳中和目标的推进，新能源汽车产业迎来爆发式增长，而智慧充电桩作为其核心基础设施，发展前景备受关注。智慧充电不仅关乎用户充电体验的优化，更是电网平衡、能源效率提升的关键环节。然而，其发展并…...

编程日记 2025/6/9 6:49:48

在Pnetlab6上绕过TPM、安全启动和 RAM 检查安装windows 11笔记

笔者本次安装的windows11的镜像为： zh-cn_windows_11_enterprise_ltsc_2024_x64_dvd_cff9cd2d.iso 1、创建镜像目录并上传iso文件 mkdir /opt/unetlab/addons/qemu/win-win11x64-2024-LTSC //目录名称务必按照官方文档格式，否则无法识别目录创建完成后，将.iso格式镜像上…...

编程日记 2025/6/9 6:48:46

【网站建设】不同类型网站如何选择服务器？建站项目实战总结

做了几个建站项目后，深刻体会到一件事：不同类型的网站，所采用的服务器策略是完全不同的。如果选错了服务器方案，可能带来过高的成本、过低的性能，甚至上线失败。这篇文章分享一下我在实战中的经验，供正在做建站项目的朋友参考。 🚩 1️⃣ 纯展示型网站 —— 静态服务…...

编程日记 2025/6/9 6:47:42

利用Pandas AI完成Excel大模型的结合实现自然语言问数

需求说明实现对Excel工具的自然语言问数，即可以通过界面上传Excel文件，然后在文本框里通过语言对话的形式问出要统计的内容。比如： 用户数有多少？ 语文成绩低于90的用户有多少？ ..... 实现思路 Pandas AI是基于…...

编程日记 2025/6/9 6:46:40

iptables实验

实验一：搭建web服务，设置任何人能够通过80端口访问。 1.下载并启用httpd服务器 dnf -y install httpd 开启httpd服务器 systemctl start httpd 查看是否启用下载并启用iptables，并关闭firewalld yum install iptable…...

编程日记 2025/6/9 6:45:36

前后端分离开发和前端工程化

来源：黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖SpringMyBatisSpringMVCSpringBoot等）_哔哩哔哩_bilibili 前后端混合开发： 需要使用前端的技术栈开发前端的功能，又需要使用Java的技术栈…...

编程日记 2025/6/9 6:44:34

web端rtmp推拉流测试、抽帧识别计数，一键式生成巡检报告

本文旨在实现无人机城市交通智慧巡检中的一个模块——无人机视频实时推拉流以及识别流并在前端展示，同时，统计目标数量以及违停数量，生成结果评估，一并发送到前端展示。对于本文任何技术上的空缺，可在博主主页前面博客…...

编程日记 2025/6/9 6:42:31

Excel 表格内批量添加前缀与后缀的实用方法

我们经常需要为 Excel 表格中的内容统一添加前缀或后缀，例如给编号加“NO.”、给姓名加“会员_”等。手动操作效率低，本文将介绍几种实用的方法，帮助你快速完成批量添加前缀和后缀的操作。使用“&”运算符添加前缀或后缀（推…...

编程日记 2025/6/9 6:41:29

Vulkan 3D Tiles渲染器开发笔记1-脚手架搭建

一、项目简介项目技术栈 CesiumNative + Dear ImGui + Vulkan 1.3 三维地理可视化系统详细项目功能说明 1. 3DTiles渲染功能实现完整的3DTiles格式解析与加载引擎支持LOD(Level of Detail)分层细节渲染可加载建筑模型、点云等3DTiles资产示例：加载城市级建筑3DTiles数据…...

编程日记 2025/6/9 6:40:28

2024 CKA题库+详尽解析| 15、备份还原Etcd

目录免费获取题库配套 CKA_v1.31_模拟系统 15、备份还原Etcd 题目： 开始操作: 1）、切换集群 2）、登录master并提权 3）、备份Etcd现有数据 4）、验证备份数据快照 5）、查看节点和Pod状态 6&am…...

编程日记 2025/6/9 6:36:11

【C/C++】std::vector成员函数清单

文章目录 std::vector使用指南1 不同版本提供的能力基础：C98 / C03 提供的成员函数C11 新增的成员函数C14：基本无变化（主要是标准库泛化，非 vector 成员变化）C17 引入的新特性（间接影响）C20 新增…...

编程日记 2025/6/9 6:35:09

如何借助Hyper - V在Windows 10中构建安全软件测试环境

视频演示手把手教你激活 Hyper-V 并安装 Windows 10 虚拟机一、引言：软件探索的风险与解决方案在数字化时代，软件更新换代的速度日新月异，对于热衷于探索新软件的朋友而言，主系统中安装新软件时的谨慎态度无可厚非。恶意软件的威胁犹如高悬的达摩克利斯之剑，稍不留…...

编程日记 2025/6/9 6:34:07

西门子 S7-1200 PLC 海外远程运维技术方案

西门子 S7-1200 PLC 海外远程运维技术方案一、面向海外场景的核心优势针对跨国企业、海外项目及远程技术支持需求，本方案基于巨控GRM552Y-CHE模块提供无缝的全球化远程PLC运维能力，突破地域及时差限制，显著提升国际项目响应效率。二、海…...

编程日记 2025/6/9 6:33:04

如何对Video视频进行SEO优化？

如何对Video视频进行SEO优化？ 在现代互联网的海洋中，搜索引擎优化（SEO）无疑是每一个网站管理员和内容创作者必须掌握的技能。而今天，我要向大家介绍一个极为强大的工具——Schema.org。它不仅能提升你的网站在搜索引擎…...

编程日记 2025/6/9 6:32:03

嵌入式学习--江协stm32day5

USART 1. 引脚与接口层异步引脚： TX：发送数据输出；RX：接收数据输入；SW_RX：单线半双工模式的接收引脚（替代 RX）。同步引脚：SCLK：同步模式下的时钟输出&…...

编程日记 2025/6/9 6:30:58

(LeetCode 动态规划（基础版）)96. 不同的二叉搜索树（递推 || 递归）

题目：96. 不同的二叉搜索树思路：二叉树长度为n时，枚举每个点u作为根节点root，那么root左边的数构成左子树种数left，root右边的数构成右子树种数right，那么当前u为根节点下，二叉树的种数为left*…...

编程日记 2025/6/9 6:29:56

服务器中CC攻击的特点有哪些？

CC攻击作为一种常见的网络攻击类型，主要是用来攻击网站页面的，当大量的用户在访问网站的过程中，打开页面的速度会变得比较慢，给数据库造成的压力就越大，CC攻击会消耗大量的服务器资源，给企业带来一定的经济…...

编程日记 2025/6/9 6:28:55

下面是在 Vue 3 项目中完整引入和使用 vite-plugin-svg-icons 的步骤 1、安装插件 npm install vite-plugin-svg-icons -D # 或 yarn add vite-plugin-svg-icons -D # 或 pnpm add vite-plugin-svg-icons -D 2、配置 Vite 在 vite.config.ts 或 vite.config.js 中配置&…...

编程日记 2025/6/9 6:27:54

智能网卡之hinic3 WQE（Work Queue Element）结构梳理

hinic3 WQE（Work Queue Element）结构详解本文基于 hinic3 驱动源码，对 WQE（Work Queue Element）做详细讲解。如需查阅完整源码和结构体定义可参考hinic3_nic_qp.h等文件。 1. WQE 的作用 WQE（Work Queue…...

编程日记 2025/6/9 6:26:52

go的工具库：github.com/expr-lang/expr

github.com/expr-lang/expr 是一个 Go 语言的表达式求值库，它允许你在运行时安全地执行表达式。主要用途包括： 1.表达式求值： program, err : expr.Compile("2 2") if err ! nil {// 处理错误 } result, err : expr.Run(program…...

编程日记 2025/6/9 6:25:49

力扣HOT100之二分查找：4. 寻找两个正序数组的中位数

这道题如果没有时间复杂度的限制的话，相当好做，但是这道题要求时间复杂度为O(log(m n))，思路很难想，我看了一圈题解，发现华南溜达虎的视频讲得还不错，我是参考他的思路写出来的，这里把他的思路…...

编程日记 2025/6/9 6:24:42

PyTorch——损失函数与反向传播(8)

Loss Functions 越小越好 L1loss MSELoss 损失函数 CrossEntyopyLoss 损失函数 import torch from torch.nn import L1Loss from torch import nn# 创建输入和目标张量，用于后续的损失计算 inputs torch.tensor([1,2,3],dtypetorch.float32) targets torch.tenso…...

编程日记 2025/6/9 6:23:37

Three.js中AR实现详解

🧩 一、技术基础

AR.js框架的核心作用

Three.js与AR.js的协作关系

⚙️ 二、实现步骤详解

步骤1：环境搭建

步骤2：标记生成与模型准备

步骤3：场景集成

步骤4：交互与动画增强

🚀 三、核心优化策略

🌐 四、应用场景案例

💎 总结

图像标记模式patt文件生成详解

🔧 一、原理简述

🖼️ 二、详细步骤

步骤 1：准备源图像（生成 .patt 的关键）

步骤 2：生成 .patt 文件

步骤 3：准备 3D 模型

步骤 4：集成到 AR.js 场景

⚙️ 三、调试与优化技巧

高级功能扩展

相关文章：