十行HTML实现增强现实--思途青岛
2024-09-08 04:05:10
你想通过网络实现增强现实吗？现在你只需要 10 行 HTML 代码！真的！让我带你看一看代码，非常简单。
我们最近发布了AR.js。你不需要安装任何应用，用你的手机通过网络就能体验到强大的增强现实。但让我们更进一步，看一下如何让你也创作出自己的增强现实体验。多亏了神奇的a-frame，最短的 AR.js只有10行HTML 代码。
引入库
首先，你需要引入a-frame，一款MozillaVR引领的开发 VR 体验的利器。A-frame 包含了 three.js。然后你只需要为 a-frame 引入 AR.js。AR.js能让 AR 中的 3d 显示在你的手机上高速运行，哪怕是 2、3 年前的旧手机。
定义 Body
这一步，国际惯例。就像你在所有 HTML 页面中做的一样，定义 body。
创建 3d 场景。
然后，我们将要创建我们的 a-farme 场景。我们当然也需要加入 ARToolkit 组件。ARToolkit是一个开源库，我们通过它来实现摄像头定位。
添加简单的内容
一旦我们创建了 3d 场景，我们可以开始向里面添加对象。在这行代码中，我们添加了一个简单的盒子。然后我们修改了它的材质，让它变得透明。我们也改变了它的位置，所以它出现在 AR 标识（AR marker）的上方。
增加 AR 摄像头
在最后一步，我们增加一个摄像头。我们预设一个 ‘hiro’最后，我们让它像你手机一样移动。是不是很简单？
恭喜！你完成了。你仅用了 10 行 html 代码实现了增强现实，手机上也能运行飞快，而且免费。
最新文章
- http请求与响应(content-type)
- 关于OC中的小数精确计算---NSDecimalNumber
- Spark Job的提交与task本地化分析（源码阅读八）
- 由Struts return SUCCESS引发的基础问题
- iOS自定义字体
- BZOJ 3170 & 切比雪夫距离
- Attribute和Property
- 一行 Python 实现并行化 -- 日常多线程操作的新思路
- IDEA和Eclipse经常使用快捷键（Win Mac）
- javascript随机将第一个dom中的图片添加到第二个div中去
- noip2015 提高组day1、day2
- WdatePicker日期不能弹出框
- Android网络开发之OkHttp--基本用法实例化各个对象
- hibernate配置三步走
- width:100vh有感而发
- windows -休眠
- WOW
- C#编译错误 CS0009:未能打开元数据文件
- MT【58】反演圆和极线极点和谐统一
- file-downloader相关问题