ar.js

150行JavaScript代码实现增强现实

由 一个人想着一个人 提交于 2020-05-04 00:32:35
增强现实技术（Augmented Reality，简称 AR），是一种实时地计算摄影机影像的位置及角度并加上相应图像、视频、 3D 模型的技术，这种技术的目标是在屏幕上把 虚拟 世界套在现实世界并进行互动。这种技术1990年提出。随着随身电子产品 CPU 运算能力的提升，预期增强现实的用途将会越来越广。 本文介绍使用JavaScript开源框架AR.js实现的增强现实的Hello World例子。 先看效果： 首先在手机浏览器里打开我部署在github page上的这个demo应用： https://i042416.github.io/FioriODataTestTool2014/WebContent/098_ar.html 我用的是Android手机安装的Chrome浏览器。 打开网页，会提示你是否允许这个网页应用访问您的手机摄像头。点击允许： 用手机上的摄像头扫描这张图片： 神奇的事情就发生了。您会看到，通过手机摄像头望过去，手机屏幕里会出现一个新的不断滚动的3D物体，如下图所示。 下面具体介绍这个最简单的例子是怎么开发出来的。 所有的源代码在我的github上： https://github.com/i042416/FioriODataTestTool2014/tree/master/WebContent/ar 新建一个html文件，把下列150行代码粘贴进去

Looking for a way in aframe to rotate and scale a model via touch when rendered over a marker

由 耗尽温柔 提交于 2019-12-22 12:38:34
问题 I'm loading this Collada (DAE) model with aframe 0.8.2 and using aframe-ar to display it over a Hiro marker: <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.5/aframe/build/aframe-ar.js"></script> <body style='margin : 0px; overflow: hidden;'> <a-scene embedded arjs='trackingMethod: best; debugUIEnabled:

I Want To Load Entity To Animate

由 孤街醉人 提交于 2019-12-12 16:38:18
问题 I am using AFrame 0.8.2 . I Want to load an animated model using like FBX Format. I tried all formats but its not working . I Imported JSON model with animation ,It Worked But its Hard to get JSON Model. So I want to Load FBX Model . Here My Cod eIn GLITCH . Please Edit The Code In Glitch And Provide A Solution . <a-scene embedded arjs='sourceType: webcam;'> <a-marker preset='hiro'> <a-entity fbx-model=”src: url(https://cdn.glitch.com/c7db968f-5d83-44e4-a392-a5c98687035a%2FNeck_Mech_Walker_by

Is there any way to make the background of a 3D-model transparent in a-scene in ionic?

由 亡梦爱人 提交于 2019-12-12 15:36:49
问题 My problem is to how make the white background of a-frame transparent that we just can see whatever we see from the iPhone camera plus the 3D-model. I have been trying to make AR (Augmented Reality) working in Ionic iOS version. I realised that a-frame can not trigger webcam for some reasons in iOS. So one of the workaround came to my mind is to load 3D model by a-frame and and trigger the camera at the same time. This some how works, in 2/3 of the screen we can see the camera input and 1/3

In AR.js When Load Model ,Show A Loading Screen

由 淺唱寂寞╮ 提交于 2019-12-11 15:27:43
问题 When We Load A Big 3D Model Or Big A Video, It Takes Time To Load The Assets(Resources) And Render The Resources,So I Want To Show A Loading Screen Or Loading Gif File or a Loading A-Box - Till The Whole Assets Loading And Rendering Is Done,On The Screen Or On The Pattern.Please Go Through My GLITCH , Its Working But It Will Take 10-15 Sec to load and render. I tried To Add Asset Loading Manager But It didn't Worked . I Tried All The Ways But It Didn't Worked <!DOCTYPE html> <html lang="en">

颜值即正义！这几个库颠覆你对数据交互的想象

由 北城余情 提交于 2019-12-06 12:53:56
作为一个对UI和动画敏感的切图仔，在日常开发之余，也会关注一些贼好看的图表库和插件。 接下来，我将给大家介绍几款web/python/vue/react里漂亮得不行的开源库/实现。 手绘风图表库：roughViz.js 基于D3(v5), roughjs, 和handy。 1.1 衡量方式 有三种衡量方式： 粗糙度： 线条种类： 线条粗细： 1.2 多种搭配 简答CDN: <script src="https://unpkg.com/rough-viz@1.0.5"></script> 复制代码npm: npm install rough-viz 复制代码react/vue: npm install react-roughviz npm install vue-roughviz 复制代码甚至在Python中也可以： pip install roughviz 复制代码1.3 简单使用 首先定义两个div <div id="vis0"></div> <div id="vis1"></div> 复制代码之后new两个实例： new roughViz.BarH( { element: '#vis0', title: "Vehicles I've Had", titleFontSize: '1.5rem', legend: false, margin: {top: 50, bottom:

颜值即正义！这几个库颠覆你对数据交互的想象

由 会有一股神秘感。 提交于 2019-12-05 18:25:57
作为一个对UI和动画敏感的切图仔，在日常开发之余，也会关注一些贼好看的图表库和插件。 接下来，我将给大家介绍几款web/python/vue/react里漂亮得不行的开源库/实现。 手绘风图表库：roughViz.js 基于D3(v5), roughjs, 和handy。 1.1 衡量方式 有三种衡量方式： 粗糙度： 线条种类： 线条粗细： 1.2 多种搭配 简答CDN: <script src="https://unpkg.com/rough-viz@1.0.5"></script> 复制代码npm: npm install rough-viz 复制代码react/vue: npm install react-roughviz npm install vue-roughviz 复制代码甚至在Python中也可以： pip install roughviz 复制代码1.3 简单使用 首先定义两个div <div id="vis0"></div> <div id="vis1"></div> 复制代码之后new两个实例： new roughViz.BarH( { element: '#vis0', title: "Vehicles I've Had", titleFontSize: '1.5rem', legend: false, margin: {top: 50, bottom:

颜值即正义！这几个库颠覆你对数据交互的想象

由 守給你的承諾、 提交于 2019-12-05 18:21:26
作为一个对UI和动画敏感的切图仔，在日常开发之余，也会关注一些贼好看的图表库和插件。 接下来，我将给大家介绍几款web/python/vue/react里漂亮得不行的开源库/实现。 手绘风图表库：roughViz.js 基于D3(v5), roughjs, 和handy。 1.1 衡量方式 有三种衡量方式： 粗糙度： 线条种类： 线条粗细： 1.2 多种搭配 简答CDN: <script src="https://unpkg.com/rough-viz@1.0.5"></script> 复制代码npm: npm install rough-viz 复制代码react/vue: npm install react-roughviz npm install vue-roughviz 复制代码甚至在Python中也可以： pip install roughviz 复制代码1.3 简单使用 首先定义两个div <div id="vis0"></div> <div id="vis1"></div> 复制代码之后new两个实例： new roughViz.BarH( { element: '#vis0', title: "Vehicles I've Had", titleFontSize: '1.5rem', legend: false, margin: {top: 50, bottom:

A-Frame & ar.js: Multiple markers & boxes

由 爷，独闯天下 提交于 2019-12-01 00:57:33
问题 Is there any proof of concept of how to implement multiple AR markers w/ A-Frame? Ex. Something like this: https://www.youtube.com/watch?v=Y8WEGGbLWlA The first video in this post from Alexandra Etienne is the effect I’m aiming for (multiple distinct AR "markers" with distinct content): https://medium.com/arjs/area-learning-with-multi-markers-in-ar-js-1ff03a2f9fbe I’m a bit unclear if when using multiple markers they need to be close to each-other/exist in the same camera view This example

How to detect when a marker is found in AR.js

由 你离开我真会死。 提交于 2019-11-28 12:33:33
I'm trying to detect when a marker if found/lost in ar.js, while using a-frame. From what I see in the source code , when the marker is found, a 'getMarker' event should be fired, moreover artoolkit seems to dispatch a markerFound event. I tried to listen to those events on the <a-scene> , or on the <a-marker> , but it seems I'm either mistaken, or i need to get deeper to the arController , or arToolkit objects. When i log the scene, or the marker, i only get references to the attributes, which don't seem to have the above objects attached.(like marker.arController , or marker.getAttribute(
订阅 ar.js