# AR.js - Augmented Reality on the Web
[](https://github.com/AR-js-org/AR.js/actions/workflows/CI.yml)
[](https://github.com/prettier/prettier)
[](https://gitter.im/AR-js/Lobby)
[&style=plastic)](https://twitter.com/nicolocarp)
[&style=plastic)](https://twitter.com/jerome_etienne)
You can now own the first commit of AR.js! 馃憠[OpenSea](https://opensea.io/assets/matic/0xe7ea2e2be12c257d376400cb231d8ee51e972bd6/3962549295964122998537137060348053157629730105441540397501924171148500367064/)
AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Image Tracking, Location-based AR and Marker tracking.
<i><b>30/12/21 Update:</b> There is now also a brand new OSS Web AR JS library around, called [MindAR](https://github.com/hiukim/mind-ar-js).
If you need a great Image tracking feature (also multiple image tracking) and Face tracking, [go check it out](https://github.com/hiukim/mind-ar-js)!
As for now, AR.js is still the only library providing Marker based and Location based AR features.</i>
This project has been created by [@jeromeetienne](https://github.com/jeromeetienne), previously managed by Nicol貌 Carpignoli and it is now maintained by the AR.js org.
馃殌For frequent updates on AR.js you can follow [@the official 饾晱(Twitter) account](https://twitter.com/ARjs_Library) and Watch this repo!
Logo is courtesy of <a href="https://twitter.com/viralinfo"> Simon Poulter </a>.
------
### 鈿★笍AR.js has now an official Documentation!鈿★笍
### Check it out: [AR.js Official Documentation](https://ar-js-org.github.io/AR.js-Docs/).
If you want to give a first look at AR.js potential, you can continue with this Readme.
-----
鈿★笍 AR.js is coming in different builds. They are both maintained. They are exclusive.
Please import the one you need for your project, not both:
- **AR.js with Image Tracking + Location Based AR (AFRAME):**
- https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js
- **AR.js with Marker Tracking + Location Based AR (AFRAME):**
- https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js
- **AR.js with Image Tracking + Marker Tracking (Threejs):**
- https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex.js
if you need the ARjs namespace import ar.js:
- https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar.js
- **AR.js with Location Based AR (Threejs):**
- https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js
You can also import a specific version replacing `master` keyword with version tag:
```html
<script src="https://raw.githack.com/AR-js-org/AR.js/3.4.5/aframe/build/aframe-ar-nft.js">
```
## Get started
### 馃柤 **Image Tracking**
Please follow these simple steps:
- Create a new project with the code below (or [open this live example](https://ar-js-org.github.io/.github/profile/aframe/examples/image-tracking/nft/) and go directly to the last step)
- Run it on a server
- Open the website on your phone
- Scan [this picture](https://raw.githubusercontent.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex-image-big.jpeg) to see content through the camera.
```html
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1.3.0/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true; precision: medium;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
<a-nft
type="nft"
url="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-entity
gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
scale="5 5 5"
position="150 300 -100"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
```
### 馃實Location Based Example
Please follow these simple steps:
- Create a new project with the following snippet, and change `add-your-latitude` and `add-your-longitude` with your latitude and longitude, without the `<>`.
- Run it on a server
- Activate GPS on your phone and navigate to the example URL
- Look around. You should see the text looking at you, appearing in the requested position, even if you look around and move.
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>GeoAR.js demo</title>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
</head>
<body>
<a-scene
vr-mode-ui="enabled: false"
arjs="sourceType: webcam; videoTexture: true; debugUIEnabled: false;"
>
<a-text
value="This content will always face you."
look-at="[gps-camera]"
scale="120 120 120"
gps-entity-place="latitude: <add-your-latitude>; longitude: <add-your-longitude>;"
></a-text>
<a-camera gps-camera rotation-reader> </a-camera>
</a-scene>
</body>
</html>
```
### 馃敳 Marker Based Example
Please follow this simple steps:
- Create a new project with the code below (or [open this live example](https://ar-js-org.github.io/.github/profile/aframe/examples/marker-based/basic.html) and go directly to the last step)
- Run it on a server
- Open the website on your phone
- Scan [this picture](https://raw.githubusercontent.com/AR-js-org/AR.js/master/data/images/hiro.png) to see content through the camera.
```html
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<!-- we import arjs version without NFT but with marker + location based support -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<a-marker preset="hiro">
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
<a-entity
position="0 0 0"
scale="0.05 0.05 0.05"
gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
```
Important!
AR.js-master.zip （347个子文件） 
patt.a 12KB patt.b 12KB scene.bin 688KB patt.c 12KB chromedriver 12.29MB index.css 1KB index.css 262B index.css 262B patt.d 12KB multi-barcode-4x3.dat 750B marker.dat 730B marker-small.dat 710B multi-marker-hirokanji.dat 287B multi-marker-hirokanji.dat 271B camera_para.dat 176B patt.f 12KB trex.fset 35KB pinball.fset 12KB pinball.fset 12KB trex.fset3 868KB pinball.fset3 625KB pinball.fset3 625KB patt.g 12KB geckodriver 6.74MB
trex.gif 18.13MB .gitignore 88B .gitignore 13B .gitignore 2B .gitignore 0B Flamingo.glb 76KB scene.gltf 11KB patt.hiro 12KB
learner-testrunner.html 14KB learner.html 14KB player-old.html 12KB generator.html 12KB measure-it.html 11KB learner-old.html 11KB screenAsPortal.html 10KB screenAsPortal-original.html 10KB player.html 10KB arjs-session.html 8KB test-runner.html 8KB profile.html 8KB dev.html 8KB minimal_ES6.html 8KB nft.html 8KB patternmarker-from-image.html 7KB mobile-performance.html 7KB default.html 7KB basic.html 7KB default.html 6KB default-thinner-border.html 6KB basic.html 4KB boilerplate-threejs.html 3KB marker-events.html 3KB index.html 3KB index.html 2KB multiple-independent-markers.html 2KB index.html 2KB index.html 2KB index.html 1KB index.html 1KB index.html 1KB index.html 1KB index.html 1KB index.html 1KB index.html 1KB index.html 1KB index.html 1KB index.html 1KB index.html 1KB marker-camera.html 1KB index.html 1KB index.html 1KB index.html 1KB index.html 993B index.html 900B minimal_ES6.html 857B index.html 831B index.html 830B white-region-marker.html 806B basic.html 700B index.html 673B index.html 656B index.html 651B index.html 641B minimal.html 556B index.html 529B trex.iset 364KB pinball.iset 123KB pinball.iset 123KB
selenium-server-standalone-3.0.1.jar 21.11MB Scene_-_Root_diffuse.jpeg 3.24MB trex-image-big.jpeg 2.24MB
markers-page-ipad.jpg 3.82MB multimarker.jpg 2.31MB pinball.jpg 764KB pinball.jpg 764KB chalk_multi.jpg 112KB共 347 条
- 1
- 2
- 3
- 4
资源评论
阿尔法星球
- 粉丝: 1569
- 资源: 251
最新资源
- 5 薪酬结构统计分析表（依据基本信息自动生成）.xlsx
- 4 员工工资表-部门薪酬分析.xlsx
- 8 公司工程部人事薪酬分析.xlsx
- 13 公司人力资源薪酬工资统计表.xlsx
- 7 薪酬市场数据统计分析.xlsx
- 9 公司员工薪酬统计分析表.xlsx
- 10 财务分析员工薪酬统计表.xlsx
- 12 财务报表员工薪酬结算.xlsx
- 11 财务报表员工薪酬分析.xlsx
- 15 薪资情况分析表.xlsx
- 14 薪资筹划财务分析表.xlsx
- 18 财务汇报部门历年薪酬统计图表.xlsx
- 16 月度工资支出数据汇总图表.xlsx
- 17财务报告年度工资统计图表1.xlsx
- 20 工资表-部分统计-图表展示.xlsx
- 21 公司部门工资情况汇报图表模板.xlsx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
