什么是增强现实（AR）？
增强现实（AR）是一项技术，可将计算机生成的图像叠加在用户对现实世界的视图上，从而提供复合视图。它与一个更通用的概念有关，称为中介现实，其中计算机修改了现实的观点（甚至可能减少而不是增强）。结果，该技术通过增强当前对现实的看法而发挥作用。 AR可以定义为同时满足以下条件的系统：
- 该系统必须能够感知其环境。
- 该系统必须能够分析或处理其感知的信息。
为什么我创建了增强现实（AR）Web应用程序？
我在一个名为Touch Reno的AR家具应用程序上工作，就像一家初创公司。
当我们向投资者提出想法时，他们就像“这是一个好主意，但我们不知道它是如何工作的”。
因此，我决定创建一个简单的AR Web应用程序以向他们展示其工作原理。
这样他们就可以在不实际下载任何应用程序的情况下查看AR。
如何创建？
- 经过深入的研究，我发现AR.js
- 它使用A-Frame，这是用于构建虚拟现实体验的网络框架。
- 此ar.js标记的主要部分。
- 标记是AR.JS库识别的模式。这是一种印刷在纸上的模式，然后用于识别现实世界中的对象。
在职的
- 首先，我们需要创建一个标记。或者只是从这里下载Marker
步骤1
- 创建一个新文件并将其命名为index.html
- 将以下代码添加到文件
<!doctype HTML>
<html>
<style lang="en" type="text/css" id="night-mode-pro-style">
body {
background-color: transparent;
}
</style>
<link type="text/css" rel="stylesheet" id="night-mode-pro-link">
<head>
<title>AR</title>
<link rel="shortcut icon" href="https://img.icons8.com/fluency/344/augmented-reality.png" type="image/x-icon">
<meta name="viewport" content="width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
</head>
<!-- https://raw.githubusercontent.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/models/CesiumMan.gltf-->
<body>
<a-scene embedded arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
<!-- include assets like 3D models and give them an id to use later -->
<a-assets>
<a-assets-item id="dinosaur"
src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf">
</a-assets-item>
<a-assets-item id="robot"
src="https://raw.githubusercontent.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/models/CesiumMan.gltf">
</a-assets-item>
</a-assets>
<!-- recognise different barcode markers ad show digital objects - box/sphere/cylinder/3D-model/image/video/anything -->
<a-marker type="barcode" value="0">
<!-- <a-box material="color: red;" scale="0.5 0.5 0.5"></a-box> -->
<a-entity position="0 0 0" scale="1 1 1" rotation="0 0 0" animation-mixer gltf-model="#robot"></a-entity>
</a-marker>
<a-marker type="barcode" value="1">
<a-entity position="0 0 0" scale="1 1 1" rotation="0 0 0" animation-mixer gltf-model="#robot"></a-entity>
</a-marker>
<a-marker type="barcode" value="2">
<a-cylinder color="#FFC65D" scale="0.5 0.5 0.5"></a-cylinder>
</a-marker>
<a-marker type="barcode" value="3">
<a-entity position="0 0 0" scale="0.06 0.06 0.06" rotation="0 90 0" gltf-model="#dinosaur"></a-entity>
</a-marker>
<!-- adding the camera -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
- 在这里，我们使用的是A-Scene标签，该标签是场景中所有3D对象的容器。
- 我们使用的是用于检测标记的A标记标签。
- 我们正在使用用于加载3D型号的A-Assets标签。
- 我们使用的是A-Entity标签，该标签用于将3D型号添加到场景中。
- 我们使用的是A摄像机标签，用于将相机添加到场景中。
- 我们使用的是A-box标签，用于将框添加到场景中。
- 我们使用的是A缸标签，用于将圆柱添加到场景中。
第2步
- 只需保存文件并将其打开在浏览器中。
- 下载Marker并打印它。
- 然后将相机聚焦在标记上，您将看到3D模型。
演示视频
结论
- 希望您喜欢这个教程。如果您有任何疑问，请随时在下面的评论部分中询问。
- 在下面评论您的想法和建议。
- 代码可在我的github上找到
Arweb
Marker0
Marker2
Marker3
演示视频
screenRecording_20220926_212315.mp4
- 用于现场演示Click Here
