WebAR.rocks.object react fiber demos

This directory is fully standalone, that's why it is not in the /demos path like other demonstrations. To make it work, run from this path:

npm install
npm run start

THREE.js is used through Three Fiber. We also use:

• react-postprocessing

Only the best demos have been ported to this development environment.

The main script and neural network models have been copied to src/js/contrib/WebARRocksObject/dist and src/js/contrib/WebARRocksObject/neuralNets.

The helpers have been modified compared to the static ones. They are in src/js/contrib/WebARRocksObject/helpers

This demo is based on Webpack boilerplate made by Tania Rascia and released under MIT software license.

npm start

You can view the development server at https://localhost:8443.

npm run build

Note: Install http-server globally to deploy a simple server.

npm i -g http-server

You can view the deploy by creating a server in dist.

cd dist && http-server

• Webpack
• Babel
• Sass
• PostCSS

• 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/core - Transpile ES6+ to backwards compatible JavaScript.
• @babel/plugin-proposal-class-properties - Use properties directly on a class. (example Babel config)
• @babel/preset-env - Smart defaults for Babel.

• 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.
  • cssnano - Optimize and compress PostCSS.
  • postcss-preset-env - Sensible defaults for PostCSS.
• css-loader - Resolves CSS imports into JS.
• style-loader - Inject CSS into the DOM.
• file-loader - Allow import of files and emit file to build folder.
• url-loader - Encode and inline files. Falls back to file-loader.

• 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.
• optimize-css-assets-webpack-plugin - Optimize and minimize CSS assets.
• terser-webpack-plugin - Minify JavaScript.