All Projects → google-ar → Three.ar.js

google-ar / Three.ar.js

Licence: apache-2.0
A helper three.js library for building AR web experiences that run in WebARonARKit and WebARonARCore

Programming Languages

javascript
184084 projects - #8 most used programming language
GLSL
2045 projects

Projects that are alternatives of or similar to Three.ar.js

lvr
👓 Augmented Reality for everyone - Out of the world experiences
Stars: ✭ 92 (-96.6%)
Mutual labels:  vr, webvr, ar, webar
3dio Js
JavaScript toolkit for interior apps
Stars: ✭ 255 (-90.56%)
Mutual labels:  vr, ar, webvr
Webar Article
WebAR-Article is a responsive and information rich website that is progressively enhanced with Augmented Reality content exposed through experimental web technologies.
Stars: ✭ 225 (-91.67%)
Mutual labels:  vr, ar, webvr
Patches
Patches is a visual programming editor for building WebVR and WebGL experiences.
Stars: ✭ 164 (-93.93%)
Mutual labels:  vr, webvr
Guri Vr
https://gurivr.com
Stars: ✭ 177 (-93.45%)
Mutual labels:  vr, webvr
Spheroidscript
Stars: ✭ 138 (-94.89%)
Mutual labels:  vr, ar
Remixvr
RemixVR is a tool for collaboratively building customisable VR experiences.
Stars: ✭ 129 (-95.23%)
Mutual labels:  vr, webvr
Webxr Polyfill
A polyfill and example code for building augmented reality (AR) and virtual reality (VR) applications using WebXR.
Stars: ✭ 227 (-91.6%)
Mutual labels:  vr, ar
Arcore
ARCore Course
Stars: ✭ 148 (-94.52%)
Mutual labels:  vr, ar
Stereokit
An easy-to-use mixed reality library for building HoloLens and VR applications with C# and OpenXR!
Stars: ✭ 195 (-92.78%)
Mutual labels:  vr, ar
Webxr Emulator Extension
WebXR emulator extension
Stars: ✭ 231 (-91.45%)
Mutual labels:  vr, ar
Dxr
DXR is a Unity package for rapid prototyping of immersive data visualizations in augmented, mixed, and virtual reality (AR, MR, VR) or XR for short.
Stars: ✭ 134 (-95.04%)
Mutual labels:  vr, ar
Model viewer.dart
A Flutter widget for rendering interactive 3D models in the glTF and GLB formats.
Stars: ✭ 134 (-95.04%)
Mutual labels:  vr, ar
Aframe Effects
A VR Ready Post processing framework for Three.js and/or A-Frame
Stars: ✭ 176 (-93.49%)
Mutual labels:  vr, webvr
Arkit Cardboard Vr
ARkit + GVR to make VR and Mixed Reality 6dof AR for iphone
Stars: ✭ 132 (-95.11%)
Mutual labels:  vr, ar
Aframe Particle System Component
Particle systems for A-Frame.
Stars: ✭ 156 (-94.23%)
Mutual labels:  vr, webvr
Xrtk Core
The Official Mixed Reality Framework for Unity
Stars: ✭ 219 (-91.89%)
Mutual labels:  vr, ar
Aframe
🅰️ web framework for building virtual reality experiences.
Stars: ✭ 13,428 (+396.97%)
Mutual labels:  vr, webvr
Konterball
Konterball is a single or 2-player virtual reality game, built for the web as a Google VR Chrome Experiment.
Stars: ✭ 112 (-95.85%)
Mutual labels:  vr, webvr
Thehallaframe
WebVR demo that displays art
Stars: ✭ 120 (-95.56%)
Mutual labels:  vr, webvr

three.ar.js

Build Status Build Status Build Status Build Status

A helper three.js library for building AR web experiences that run in WebARonARKit and WebARonARCore.

Spawn-at-Surface example, for ARCoreSpawn-at-Camera example, for ARKit

WebARonARKit and WebARonARCore are experimental apps for iOS and Android that let developers create Augmented Reality (AR) experiences using web technologies. three.ar.js makes it easier to create these experiences by providing helper classes and utilities on top of the three.js 3D library, which interfaces with the WebVR Extension for AR exposed by WebARonARKit and WebARonARCore. For example:

  • THREE.ARReticle: a visible reticle drawn on the real surface of real world objects.
  • THREE.ARPerspectiveCamera: a camera that matches your three.js scene to your camera's video feed.

See three.ar.js API documentation for details.

Installing

CDN

<script src="https://cdn.jsdelivr.net/npm/three.ar.js@latest/dist/three.ar.js"></script>
<!-- or the minified version -->
<script src="https://cdn.jsdelivr.net/npm/three.ar.js@latest/dist/three.ar.min.js"></script>

Script

Download the build at dist/three.ar.js and include it as a script tag in a web page. You must include three.js as well, and three.ar.js must be included after.

<script src='three.js'></script>
<script src='three.ar.js'></script>

npm

If you're using a build tool, like browserify or webpack, install it via npm. Note you must also have three.js installed via npm.

$ npm install --save three three.ar.js

Using

Accessing three.ar.js depends on the environment you're working in. Below are examples of importing the code via script tag, as well as a module bundler like browserify or webpack.

To view the additional APIs implemented by WebARonARKit and WebARonARCore, view the WebVR Extension for AR document.

For more examples, see the examples/ directory.

See the full three.ar.js API documentation for more details.

Script

If you are including three.ar.js via script tag, the additional three.ar.js features are appended to the THREE namespace, for example:

/**
 * Not a full working example -- see the `examples/` directory
 */
THREE.ARUtils.getARDisplay().then(init);

function init(display) {
  vrDisplay = display;
  // Set up three.js scene
  renderer = new THREE.WebGLRenderer({ alpha: true });
  scene = new THREE.Scene();

  // ...

  // Set up our ARView with ARPerspectiveCamera
  arView = new THREE.ARView(vrDisplay, renderer);
  camera = new THREE.ARPerspectiveCamera(vrDisplay, 60, window.innerWidth / window.innerHeight, vrDisplay.depthNear, vrDisplay.depthFar);
  vrControls = new THREE.VRControls(camera);

  update();
}

function update() {
  // Update our controls/camera, the ARView rendering,
  // and our three.js scene
  vrControls.update();
  arView.render();
  renderer.clearDepth();
  renderer.render(scene, camera);
  vrDisplay.requestAnimationFrame(update);
}

Modules

If you're in a browserify or webpack like environment, three.ar.js uses three.js as a peer dependency. This means you can import both packages separately.

import { Scene, WebGLRenderer } from 'three';
import { ARUtils, ARPerspectiveCamera, ARView } from 'three.ar.js';

async function init() {
  const display = await ARUtils.getARDisplay();
  const renderer = new WebGLRenderer({ alpha: true });
  const arView = new ARView(display, renderer);

  // And so forth...
}

Contributing

If you're developing and modifying the three.ar.js library itself, there are some helpful build tools for you.

Installing Dependencies

Run npm install to install dependencies required for this project.

Building

Run npm run build to create a new build in ./dist. When sending pull requests, do not build your changes and allow maintainers to do so. There are additional commands for building, like npm run build-min for building the minified file, and npm run build-all for building both.

To auto build when the source changes, run npm run watch.

Linting

Run npm run lint to run the linter on code in src/.

Testing

Right now, there are only linting tests. To run the tests, execute:

$ npm test

For testing functionality, go through the examples with your changes and ensure the expected functionality.

Releasing a new version

For maintainers, to cut a new release for npm, use the npm version command. The preversion, version and postversion npm scripts will run tests, build, add built files and tag to git, push to github, and publish the new npm version.

npm version <patch|minor|major>

You should be sure that git push pushes to the origin repository if you're working in a fork. See the postversion npm script, and that you have access to both the repo and npm package.

Examples

Examples of three.ar.js are in the /examples directory.

A list of examples that are compatible with WebARonARKit and WebARonARCore is also available at developers.google.com.

Created a cool example or want to see more from the community? Check out this gist with some links. Leave a comment to add yours!

License

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].