Exploring the samples

Now that we have an AR-enabled web browser, we can proceed to exploring some examples. Follow the instructions in the mentioned steps to explore the samples:

Open Command Prompt or shell to the Android folder and enter this:

git clone https://github.com/google-ar/three.ar.js.git

Ensure that your http-server web browser is running from the Android folder. If you need to start the server again, just run the command from the last exercise.
Point your web AR-enabled browser (WebARCore) on your device to a valid endpoint URL. Again, check the last exercise if you forgot how to do this. If the page goes black or is unresponsive, you may have to reset the app. Just shut down the WebARCore browser app and restart it.

Browse to the three.ar.js/examples/ folder. Inside this folder, you will find a set of example HTML pages of AR apps developed with three.js and three.ar.js. The following table outlines each of the examples, with a description of what they do:

Page	Description	Concepts
`boilerplate.html`	A simple project for building on	Basic
`graffiti.html`	Touch interaction and drawing in AR	Touch, environment
`record-at-camera.html`	Record 3D spatial audio at a point	Touch, spatial audio
`reticle.html`	Tracks the pose of a surface	Motion, pose tracking – environment
`spawn-at-camera.html`	Touch spawn an object at the camera position	Touch, environment
`spawn-at-surface.html`	Touch spawn object on a identified surface or plane	Touch, environment
`surfaces.html`	Identifies surfaces or planes in the environment	Environment

At the time of writing these were the examples available. There likely will be some new samples added that have some of the newer features or other ways of doing things. Be sure to check your folder and spend some time exploring each of those samples.

Browse through each of the samples on your device. These samples are excellent examples of the concepts we will cover in the later chapters.

If the screen goes black while running the WebAR browser, then just force close the app and restart it. What typically happens is that Chrome's Developer tools (DevTools) and the app get out of sync and just need to be restarted.

We now have an HTTP server running on our development machine serving up web AR apps to our device. This is great, but how will we edit the code and debug? Being able to debug code will also be critical to our success when we start writing new code. Therefore, in the next section, we will learn how to set up remote web debugging to an Android device.

Table of Contents for Exploring the samples

Create new playlist

Sign In

Sign Up

Table of Contents for
Exploring the samples