Taolin · 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/

<!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>

<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>