澳门在线威尼斯官方 > 威尼斯澳门在线 > 十行HTML实现增强现实

原标题:十行HTML实现增强现实

浏览次数:127 时间:2019-11-16

十行HTML达成做完结实

2017/06/11 · HTML5 · 1 评论

本文由 伯乐在线 - 风流倜傥杯哈希不加盐 翻译,艾凌风 校稿。未经许可,制止转发!
保加贝洛奥里藏特语出处:Alexandra Etienne。招待参与翻译组。

您想经过互联网达成压实现实吧?将来您只必要 10 行 HTML 代码!真的!让本身带你看风度翩翩看代码,特轻巧。

我们近期公布了AR.js。你无需设置任何利用,用你的手提式无线电话机通过网络就能够感受到无敌的巩固现实。但让我们更进一层,看一下怎样让您也撰文出自个儿的拉长现实体验。多亏损奇妙的a-frame,最短的 ALX570.js 独有 10 行 HTML 代码。你能够在codepen看样子在线版:

XHTML

<!-- Augmented Reality on the Web in 10 lines of html! --> <script src="; <script src="; <script>THREEx.ArToolkitContext.baseURL = '; <body style='margin : 0px; overflow: hidden;'> <a-scene embedded artoolkit='sourceType: webcam;'> <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene> </body>

1
2
3
4
5
6
7
8
9
10
<!-- Augmented Reality on the Web in 10 lines of html! https://github.com/jeromeetienne/ar.js -->
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded artoolkit='sourceType: webcam;'>
        <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
        <a-marker-camera preset='hiro'></a-marker-camera>
    </a-scene>
</body>

大家来后生可畏行黄金时代行看.

你想透过网络完毕增加现实吧?今后你只需求 10 行 HTML 代码!真的!让本人带你看后生可畏看代码,特别轻便。

引入库

XHTML

<script src="; <script src="; <script>THREEx.ArToolkitContext.baseURL = ';

1
2
3
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>

首先,你供给引进a-frame,一款MozillaVR引领的支付 VRAV4 体验的利器。A-frame 包罗了 three.js。然后您只需求为 a-frame 引入A奥德赛.js。AKoleos.js能让 AQashqai 中的 3d 显示在您的手提式有线话机上高速运营,哪怕是 2、3 年前的旧手提式有线电话机。

咱俩多年来公布了A安德拉.js。你无需设置任何利用,用你的无绳电话机通过互连网就可以心获得无敌的抓达成实。但让大家更上一层楼,看一下什么让您也撰文出团结的拉长现实心得。多亏掉玄妙的a-frame,最短的 A奥迪Q3.js唯有10行HTML 代码。

定义 Body

XHTML

<body style='margin : 0px; overflow: hidden;'> <!-- ... --> </body>

1
2
3
<body style='margin : 0px; overflow: hidden;'>
    <!-- ... -->
</body>

这一步,国际惯例。就疑似您在全数 HTML 页面中做的平等,定义 body。

图片 1

创建 3d 场景

XHTML

<a-scene embedded artoolkit='sourceType: webcam;'> <!-- put your 3d content here --> </a-scene>

1
2
3
<a-scene embedded artoolkit='sourceType: webcam;'>
    <!-- put your 3d content here -->
</a-scene>

然后,大家将在创造我们的 a-farme 场景。大家自然也亟需加入 ARToolkit 组件。ARToolkit是八个开源库,大家透过它来兑现摄像头定位。

引入库

拉长不难的原委

XHTML

<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>

1
<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>

设若我们创立了 3d 场景,大家得以初步向在那之中增添对象。在此行代码中,大家增添了多少个简短的盒子。然后大家修正了它的材料,让它变得透明。大家也转移了它的岗位,所以它出以后A索罗德 标志(APRADO marker卡塔 尔(阿拉伯语:قطر‎的上方。

(摄像截图卡塔 尔(阿拉伯语:قطر‎

图片 2

图片 3

增加 AR 摄像头

XHTML

<a-marker-camera preset='hiro'></a-marker-camera>

1
<a-marker-camera preset='hiro'></a-marker-camera>

在最终一步,大家增添一个摄像头。咱们预设叁个 ‘hiro’(来自Hiro marker卡塔 尔(阿拉伯语:قطر‎最终,我们让它像你手提式有线电话机风度翩翩律移动。是或不是很简短?

恭贺!你成功了。你仅用了 10 行 HTML 代码达成了夯达成实,手提式有线电电话机上也能运作高效,而且无偿。

能够看一下本身做的摄像教程(搬运自youtube,字幕为 youtube 自动识别内嵌字幕,有一点点鉴定识别基值误差,不影响观看卡塔 尔(阿拉伯语:قطر‎:

(一些截图卡塔 尔(英语:State of Qatar)

图片 4

打赏帮忙本身翻译越来越多好小说,多谢!

打赏译者

首先,你须要引进a-frame,风度翩翩款MozillaV智跑引领的花费 VEvoque 体验的利器。A-frame 包括了 three.js。然后你只必要为 a-frame 引进 APRADO.js。A讴歌ZDX.js能让 ALacrosse 中的 3d 显示在您的无绳电话机上高速运转,哪怕是 2、3 年前的旧手提式有线电话机。

打赏扶植小编翻译更加多好散文,谢谢!

任选少年老成种支付情势

图片 5 图片 6

2 赞 8 收藏 1 评论

定义 Body

至于小编:风流浪漫杯哈希不加盐

图片 7

毕业于新奥尔良大学软件工程职业,身为 Java 程序猿也常用 JavaScript 做点有趣的东西 。为了兴趣而写代码,做要好爱怜做的事。Keep Coding ... Stay Cool ... (单身,接待骚扰) 个人主页 · 小编的稿子 · 30 ·    

图片 8

图片 9

这一步,国际惯例。就疑似您在装有 HTML 页面中做的同后生可畏,定义 body。

创建 3d 场景。

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:十行HTML实现增强现实

关键词:

上一篇:没有了

下一篇:没有了