你想通过网络实现增强现实吗?现在你只需要 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 代码实现了增强现实,手机上也能运行飞快,而且免费。

十行HTML实现增强现实--思途青岛的更多相关文章

  1. 浅谈java中的四个核心概念--思途青岛

    Java已经成为一个庞大而复杂的技术平台,对于开发人员而言,要想更好的掌握Java技术,深入理解底层的技术处理细节必不可少. 现在介绍下java的四个核心概念: 1.Java虚拟机 Java虚拟机的主 ...

  2. 学Web前端开发,选择培训学校是关键--青岛思途

    互联网+的提出,催生了Web前端开发行业更大的就业空间,其行业热度也正呈爆炸式增长.专业人才供不应求导致了从业者薪资的居高不下,一般来说Web前端工程师的年薪可达15w以上,工作3~5年后通常可达到1 ...

  3. 让HTML5游戏来的更猛烈些吧!--青岛思途

    作为著名的网页游戏门户,Kongregate在业界也算是鼎鼎大名了.小编与它的初识应是在几年前,只记得当时其平台上的游戏基本都是需要Flash的支持,可前几天,Adobe宣布计划停止Flash的更新和 ...

  4. 各大CMS系统优缺点(2017)

    各大CMS系统优缺点(2017) 总结 WordPress之前用过,可能需要再完整的用一个才会比较了解. 从2015年各行业建站规模来看,还有一大批人想自己搭建网站,下面为大家盘点一下比较实用CMS系 ...

  5. emouse思·睿—评论与观点整理之一

    虽说我主要做的硬件,平时的兴趣爱好比较关注移动互联网,混迹于虎嗅.爱范儿.雷锋网.36Kr.cnBeta.瘾科技.i黑马.TechWeb等这类科技以及创业媒体,遗憾的是系统的去写的并不多,好在还算充分 ...

  6. 记:青岛理工ACM交流赛筹备工作总结篇

    这几天筹备青岛理工ACM交流赛的过程中遇到了不少问题也涨了不少经验.对非常多事也有了和曾经不一样的看法, ​一直在想事后把这几天的流水帐记一遍,一直没空直到今天考完C++才坐下来開始动笔.将这几天的忙 ...

  7. julia应用于自动驾驶汽车、机器人、3D 打印、精准医疗、增强现实、基因组学、能源交易、机器学习、金融风控和太空任务设计等多个领域

    编程界的新宠 Julia 发布 1.0 正式版本,多种优势集于一身2018-08-14 14:14 公司Julia 的累积下载次数超过 200 万,已被应用于自动驾驶汽车.机器人.3D 打印.精准医疗 ...

  8. LFM oversea投资笔记、思摩尔、移卡、建业新生活、鑫苑物业

    LFM oversea 1.公司简介 2.业务展望 3. 投资策略 LFM oversea介绍 LFM oversea是在开曼成立的投资基金, 专注于中国优质企业在香港和美国IPO过程中的 基石.锚定 ...

  9. 2016 ICPC青岛站---k题 Finding Hotels(K-D树)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5992 Problem Description There are N hotels all over ...

随机推荐

  1. Java(31)泛型和可变参数

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15228443.html 博客主页:https://www.cnblogs.com/testero ...

  2. 命名空间、作用域、LEGB法则、垃圾回收机制

    一.命名空间.作用域.LEGB法则. 1.命名空间和作用域 : 命名空间:变量名称与值的映射关系 作用域:变量作用的区域,即范围. 注意:class/def/模块会产生作用域:分支语句,循环语句,异常 ...

  3. csh

    在*unix系统中,常用的shell有sh,bash,csh/tcsh, ksh.  sh来自于systemV的Unix,是传统的Unix的shell,直到现在很多的系统管理员仍然喜欢使用sh. ba ...

  4. Spark RDD编程(博客索引,日常更新)

    本篇主要是记录自己在中解决RDD编程性能问题中查阅的论文博客,为我认为写的不错的建立索引方便查阅,我的总结会另立他篇 1)通过分区(Partitioning)提高spark性能https://blog ...

  5. HttpClient.PatchAsJsonAsync - dotnet/runtime 项目贡献小记

    TL;DR 迫于 PatchAsJsonAsync 方法缺失,我给 dotnet/runtime 项目贡献了相关的 API,可惜要到 .NET7 才能用上. https://github.com/do ...

  6. java中的软,弱,虚引用介绍与特性分析

    java的弱,虚,软引用介绍 1.弱,虚,软引用的介绍 对于绝大部分的对象而言,在程序中是存在着一个引用变量引用该对象,这是常见的引用方式,也就是常说的 强引用,对于强引用引用的对象,系统JVM是不会 ...

  7. 简明教程 | Docker篇 · 其一:基础入门

    了解Docker Docker是什么 Docker是指容器化技术,用于支持创建和使用 Linux 容器,同时Docker也是软件容器平台. 什么是容器(container) 容器是主机上与其他进程隔离 ...

  8. MIPI归纳---为什么阻抗为100欧姆

    根据LVDS(Low Voltage Differential Signaling)电平定义的. LVDS差分信号PN两线最大幅度是350mV,内部一个恒流源电流是3.5mA.于是终端匹配电阻是100 ...

  9. 『学了就忘』Linux基础 — 8、虚拟机网络模式说明

    目录 1.虚拟机网卡 2.网络连接模式对应工作的网卡 3.桥接模式说明 4.补充说明 这篇主要总结一下虚拟机网络配置中桥接模式.NAT模式和仅主机模式的区别. 打开VMware,选中虚拟机,点击网络适 ...

  10. SpringBoot整合Easyexcel操作Excel,闲暇之余,让我们学习更多

    关于封面:晚饭后回自习室的路上 Easyexcel 官方文档 Easyexcel | github 前言 最近也是在写的一个小练习中,需要用到这个.趁着这次就将写个整合的Demo给大家. 希望能够让大 ...