一个好玩的东西，纯JS代码实现增强现实（AR.js）

最新推荐文章于 2025-10-11 20:38:09 发布

原创

最新推荐文章于 2025-10-11 20:38:09 发布 · 置顶 · 5k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #AR

本文介绍如何使用开源AR.js库在网页中实现增强现实效果，通过实例演示了如何利用AR.js和Three.js在场景中添加交互式3D模型，并提供了完整的代码示例。

增强现实技术（Augmented Reality，简称 AR），是一种实时地计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术，这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动。这种技术1990年提出。随着随身电子产品CPU运算能力的提升，预期增强现实的用途将会越来越广。

---

先体验

首先在手机浏览器里打开这个demo应用[http://jacktesla.xyz/Demo/webAR/]

(打开网页，会提示你是否允许这个网页应用访问您的手机摄像头。点击允许)。

打开这张图片，手机对着这张图片[http://jacktesla.xyz/Demo/webAR/marker.png]

---

新建一个html文件，把下列150行代码粘贴进去，然后在服务器上运行，使用之前描述的步骤即可进行AR测试：

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<!-- three.js library -->

<script src='./js/three.min.js'></script>

<script src="./js/stats.min.js"></script>

<!-- ar.js -->

<script src="./js/ar.min.js"></script>

<script>THREEx.ArToolkitContext.baseURL = '../'</script>



<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'>

    <a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - three.js mobile performance

    <br/>

    Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>

</div><script>

    //////////////////////////////////////////////////////////////////////////////////

    //      Init

    //////////////////////////////////////////////////////////////////////////////////

    // init renderer

    var renderer    = new THREE.WebGLRenderer({

        // antialias    : true,

        alpha: true

    });

    renderer.setClearColor(new THREE.Color('lightgre

最低0.47元/天解锁文章