AR体验
前端
AR.js+Three.js+Autodesk 3D
流程
- 手机开启浏览器
AR.js程序开始ARToolKit识别到图片标记A-Frame.js开始调用Three.js渲染3D模型- 在画面上显示
Ar.js
AR.js是一个轻量级的增强现实类JavaScript库，支持基于标记和位置的增强现实。开发人员可以使用几行HTML将AR特性和功能引入任何网站。通过包装许多不同的AR框架，包括three.js，a-frame和ARToolKit，AR.js使得将AR引入Web应用程序变得更加简单高效。
标记
条形码标记
条形码标记是标准的ARToolkit标记，由黑白块组成。
生成工具：https://au.gmented.com/app/marker/marker.php
二维码标记
二维码在线生成https://cli.im/
Ar.js Marker生成工具: https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
下载“DOWNLOAD MARKER”得到“pattern-marker.patt”这个档案会在ARToolkit里面使用
下载“DOWNLOAD IMAGE”得到“marker.png”这张图片我们就可以并贴到列印起来
然后下载图片，和下载一个patt后缀的文件。 （后面会用到）
显示一个红色立方体
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
<script>
window.onload = function(){
setTimeout(function(){
var resizeEvent = window.document.createEvent('UIEvents');
resizeEvent.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(resizeEvent);
}, 3000);
};
</script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
<a-marker preset='custom' type='pattern' url='main.patt'>
<a-box position='0 0.5 0' color="red"></a-box>
</a-marker>
<!--定义相机-->
<a-entity camera></a-entity>
</a-scene>
</body>
Three.js
https://sketchfab.com/3d-models
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
<a-marker type='pattern' url='main.patt'>
<a-entity position='0 0 0' gltf-model="url(scene.gltf)"></a-entity>
<a-box position='0 0.5 0' color="red"></a-box>
</a-marker>
<!--定义相机-->
<a-entity camera></a-entity>
</a-scene>
</body>
参考
https://skarredghost.com/2019/08/29/how-to-seamless-mobile-ar-js/