WebAR-Article - GitLite

KO | EN

gitlite — search

#javascript #python #ai #typescript #go #android #machine-learning #rust #linux #docker #kubernetes #vue #awesome-list #mcp

WebAR-Article

(★ 244)

WebAR-Article is a responsive and information rich website that is progressively enhanced with Augmented Reality content exposed through experimental web technologies.

File Explorer

Download Latest Version (.zip)

- - style.css
- - 1920px-Iss009e29620.jpg
  - Apollo_Moonwalk2.jpg
- - index.js
  - index.js.map
  - index.min.js
  - index.min.js.map
- index.html
- - App.js
  - AppBase.js
- - ARControls.js
  - AREffects.js
- - helvetiker_regular_typeface.json
- - Background.js
  - Fadeable.js
  - GroundGrid.js
  - Highlight.js
  - Reticle.js
  - Shadow.js
- - Button.js
  - CircularButton.js
  - Controller.js
  - Grid.js
  - HUD.js
  - LoadingIndicator.js
  - Toast.js
  - View.js
- - ic_close_white_32dp_2x.png
  - ic_fullscreen_exit_white_32dp_2x.png
  - ic_fullscreen_white_32dp_2x.png
  - ic_grid_off_white_32dp_2x.png
  - ic_grid_white_32dp_2x.png
  - ic_view_in_ar_white_32dp_2x.png
  - Icons.js
- - webar-desktop.min.js
- index.js
- - draco_decoder.js
  - DRACOLoader.js
  - LICENSE
  - METADATA
- - LICENSE
  - METADATA
  - three.ar.min.js
- - LICENSE
  - METADATA
  - MTLLoader.js
  - OrbitControls.js
  - three.min.js
  - VRControls.js
.babelrc
.eslintrc
.gitignore
build.sh
CONTRIBUTING.md
LICENSE
licenses.txt
package.json
README.md
webpack.config.js

# Installation Guide

1. Get the code

git clone https://github.com/google-ar/WebAR-Article

Downloads the entire project code from GitHub to your computer.

cd WebAR-Article

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

git clone git@github.com:google-ar/webar-article.git article && cd article && npm install

Downloads the entire project code from GitHub to your computer.

npm run dev

Starts the development/run server.

npm run build

Builds optimized production files.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# WebAR-Article

## About

**Article is a responsive and information rich website that is progressively enhanced
with Augmented Reality (AR) content exposed through experimental web technologies. Check out Article in action here:**

[https://google-ar.github.io/WebAR-Article/public/](https://google-ar.github.io/WebAR-Article/public/)

**To learn more about Article, check out the blog post here:**

[https://www.blog.google/products/google-vr/augmented-reality-web-everyone/](https://www.blog.google/products/google-vr/augmented-reality-web-everyone/)

**To learn more about the technologies behind WebAR-Article, please visit:**

[https://developers.google.com/ar/develop/web/getting-started](https://developers.google.com/ar/develop/web/getting-started)

## Getting Started

### Prerequisites

WebAR-Article will work everywhere, desktop, tablet and mobile. However, if you want to experience WebAR-Article's AR content make sure you have installed [WebARonARKit](https://github.com/google-ar/WebARonARKit) if you are on iOS or [WebARonARCore](https://github.com/google-ar/WebARonARCore) on Android. If you aren't familar with these experimental browsers, please visit their respective github repository to learn how to get starting.

WebAR-Article is built using modern web development tooling, so before getting started make sure you have [node](https://nodejs.org/en/) and the [npm package manager](https://www.npmjs.com/get-npm) installed on your development machine.

### Installing

Clone this repository and change directories into it and then install its dependencies.

```
git clone git@github.com:google-ar/webar-article.git article && cd article && npm install
```

### Running

To view the site on desktop, start the webpack dev server by the following command:
```
npm run dev
```
Then open your browser and navigate to localhost:8000. To view Article's AR content, open either WebARonARCore on Android or WebARonARKit on iOS and navigate the browser to the IP address of the machine serving the site, followed by the port 8000: i.e. http://XXX.XXX.XXX.XXX:8000

### Building
To build the site for deployment, run the following command:
```
npm run build
```
Once built, all the build files will be in the public folder.

## Contributing

If you have fixes, we would love to have your contributions. Please read CONTRIBUTING.md for more information on the process we would like contributors to follow.

## License

Apache License Version 2.0 (see the LICENSE file inside this repo).

## Disclaimer

**This is not an official Google product.**

## Built with

+ [three.js](https://threejs.org/)
+ [three.ar.js](https://github.com/google-ar/three.ar.js)
+ [Draco](https://github.com/google/draco)
+ [Poly](https://poly.google.com/)
+ [Bootstrap](http://getbootstrap.com/)
+ [Bootswatch](https://bootswatch.com/)

## Credits
+ [Wikipedia](https://en.wikipedia.org/wiki/Space_suit)
+ [Poly Model](https://poly.google.com/view/dLHpzNdygsg)

## Links
+ [WebARonARCore](https://github.com/google-ar/WebARonARCore)
+ [WebARonARKit](https://github.com/google-ar/WebARonARKit)