快捷搜索:
来自 新京葡娱乐场网址 2019-07-04 11:53 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

十行HTML达成增加现实

十行HTML实现抓牢现实

2017/06/11 · HTML5 · 1 评论

本文由 伯乐在线 - 一杯哈希不加盐 翻译,艾凌风 校稿。未经许可,禁止转发!
德文出处:Alexandra Etienne。招待加入翻译组。

您想经过网络实现抓牢现实吗?以往你只必要 10 行 HTML 代码!真的!让本人带你看一看代码,特别不难。

大家近日发表了AR.js。你无需设置任何利用,用你的手提式无线电话机通过网络就能够体验到有力的拉长现实。但让我们更进一步,看一下什么样令你也撰写出本身的加强现实经验。多亏了神奇的a-frame,最短的 AGL450.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>

小编们来一行一行看.

引入库

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引领的支付 V奥德赛 体验的利器。A-frame 包罗了 three.js。然后您只需求为 a-frame 引入A索罗德.js。AHighlander.js能让 A大切诺基 中的 3d 展现在你的无绳电话机上高速运营,哪怕是 2、3 年前的旧手提式有线电电话机。

定义 Body

XHTML

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

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

这一步,国际惯例。就如你在具有 HTML 页面中做的平等,定义 body。

创建 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 场景,我们能够起来向里面加多对象。在那行代码中,我们增添了贰个简单的盒子。然后我们修改了它的材质,让它变得透明。我们也改造了它的地方,所以它出现在 AKuga 标记(A大切诺基 marker)的上面。

(录像截图)

图片 1

增加 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 自动识别内嵌字幕,有微量分辨测量误差,不影响观察):

(一些截图)

图片 2

打赏援助小编翻译越来越多好小说,感激!

打赏译者

打赏援助小编翻译越多好小说,多谢!

任选一种支付形式

图片 3 图片 4

2 赞 8 收藏 1 评论

关于作者:一杯哈希不加盐

图片 5

毕业于阿里格尔高校软件工程正式,身为 Java 程序猿也常用 JavaScript 做点有意思的东西 。为了兴趣而写代码,做团结喜好做的事。Keep Coding ... Stay Cool ... (单身,迎接干扰) 个人主页 · 笔者的篇章 · 30 ·    

图片 6

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:十行HTML达成增加现实

关键词: