怎样实现的?
  • 怎样实现的?
  • 简介
  • 怎样实现的?
    • 用Mastodon搭建自己的Twitter
    • 用Cumulusclips搭建自己的YouTube
    • 用bookStack搭建团队知识平台
    • 用Duplicati实现计划备份
    • 用FreeNAS搭建网络存储服务器
    • Ovirt4.2搭建流程
    • 使用Rancher光速搭建K8s集群
    • CentOS7不重启扩展根分区磁盘空间
    • 搭建团队文档协作平台(OnlyOffice)
    • 使用TF-Hub进行迁移学习(图像分类)
    • 用EVE-NG做仿真网络实验
    • 用docsite生成企业站点
    • 使用Harbor搭建自己的docker镜像仓库
    • 使用OpenSTF同时操作多台手机
    • 使用LDX创建管理基于容器的虚拟机
    • 调整Linux内核参数
    • ProxmoxVE高可用集群搭建并集成Ceph
    • Ceph集群的搭建与运维
    • Nextcloud搭建自己的云盘
    • Centos7搭建单节点OpenShift(OKD)
    • 使用Fuel快速搭建OpenStack
    • CentOS7搭建DNS服务器
    • 微信的语音段传输
    • 用Python写MT4自动交易策略来炒外汇
    • WebAR
    • 用BadUSB物理入侵别人的电脑
    • 用Tensorflow.js和摄像头玩俄罗斯方块
    • 开发以太坊DAPP--水果机
    • 表达式是怎样被解析的呢
    • Airtest基于图像识别的UI自动化测试工具
    • 滑动拼图验证码的JS实现
    • 内网穿透--TCP打洞
    • 一致性哈希算法的理解与实践
Powered by GitBook
On this page
  • 原理
  • 实现代码
  • 备注
  • Github地址
  • 效果展示
  1. 怎样实现的?

WebAR

原理

  • 调用AR.js和A-frame库来实现识别Marker图像的位置,并在位置上绘制图形或动画

实现代码

<!doctype HTML>
<html>
<!-- include A-Frame obviously -->
<script src="/static/js/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="/static/js/aframe-ar.js"></script>
<!-- include A-Frame-Extras -->
<script src="/static/js/aframe-extras.min.js"></script>

<body style='margin : 0px; overflow: hidden;'>
  <a-scene embedded arjs>
    <!-- 加载 gltf 模型 和 自定义的标记 Marker 图像 -->
    <a-marker preset='custom' type='pattern' url='/static/marker/pattern-marker.patt'>
      <a-entity gltf-model="/static/gltf/scene.gltf" scale="1.5 1.5 1.5" rotation="-160 0 0" position="0 0.5 0">
      </a-entity>
    </a-marker>
    
    <!-- 添加摄像头 -->
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>

备注

Github地址

效果展示

Previous用Python写MT4自动交易策略来炒外汇Next用BadUSB物理入侵别人的电脑

Last updated 6 years ago

寻找GLTF模型的地方:

https://sketchfab.com/feed#
https://github.com/ns2250225/ns2250225.github.io