Location-based AR.js with three.js - Develop a simple Points of Interest app

AR.js 3.4 features a pure three.js API for location-baed AR. Here is a series of tutorials taking you through how to use it, from the basics to a more advanced example: a simple but working Points of Interest app using a live web API.

It is expected that you have some basic three.js experience.

Do note that this code will not work on Firefox on a mobile device due to limitations of the device orientation API; absolute orientation cannot be obtained. Chrome on Android is recommended.

Installing

It is recommended to install via npm and build with a bundler such as Webpack. and import it into your application.

Here is a sample package.json:

{
    "dependencies": {
        "@ar-js-org/ar.js": "3.4.2",
    },
    "devDependencies": {
        "webpack": "^5.75.0",
        "webpack-cli": "^5.0.0"
    },
    "scripts": {
        "build": "npx webpack"
    }
}

and a sample webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    optimization: {
        minimize: false
    }
};

This will build a bundle named bundle.js in the dist subdirectory from a source file index.js. This will be assumed in the examples.