⑇ ARJS webpack v5 Boilerplate

A static website boilerplate for ThreeJS + ARJS projects managed via Webpack5.

Demo

Marker-based demo

Open this live demo and show this hiro marker to the camera!

NFT-based (image-based) demo

Open this live demo and show this pinball image to the camera!

You can also checkout this simulated-image version. (might need a page refresh, still a bug to fix there..)

Build on the shoulders of giants

Thanks to Tania Rascia. I reused her Webpack5 boilerplate as a base for this code.

Thanks to ARJS team for their amazing Web AR plugin.

Thanks to ThreeJS team for bringing 3D magic on the web.

Installation

Clone this repo and yarn install.

yarn install

Usage

Development server

yarn start

Marker-based version

You can view the development server at localhost:8080 and use the hiro marker.

Or you can access a marker simulation mode from http://localhost:8080/?mode=simulation.

NTF-based version ⚠️ down! work in progress..

You can view the development server at localhost:8080/?type=nft and use the pinball image.

Or you can access a image simulation mode from http://localhost:8080/?mode=simulation&type=nft.

Test you app with ngrok

Keep the development server opened, open a new terminal tab. Install ngrok and run:

ngrok http 8080 -host-header="localhost:8080"

Production build

yarn build

Deplot to Github pages

Run this command:

yarn deploy

And setup Github pages on your repo:

• Source: gh-pages branch
• Folder root.

Features

• webpack
• Babel
• Sass
• PostCSS

Dependencies

ThreeJS and ARJS through external links

• three
• ar

webpack

• webpack - Module and asset bundler.
• webpack-cli - Command line interface for webpack
• webpack-dev-server - Development server for webpack
• webpack-merge - Simplify development/production configuration
• cross-env - Cross platform configuration

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/plugin-proposal-class-properties - Use properties directly on a class (an example Babel config)
• @babel/preset-env - Smart defaults for Babel

Loaders

• babel-loader - Transpile files with Babel and webpack
• sass-loader - Load SCSS and compile to CSS
  • node-sass - Node Sass
• postcss-loader - Process CSS with PostCSS
  • postcss-preset-env - Sensible defaults for PostCSS
• css-loader - Resolve CSS imports
• style-loader - Inject CSS into the DOM

Plugins

• clean-webpack-plugin - Remove/clean build folders
• copy-webpack-plugin - Copy files to build directory
• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extract CSS into separate files
• css-minimizer-webpack-plugin - Optimize and minimize CSS assets

Author

• Yann Klein

License

This project is open source and available under the MIT License.