reactThreeFiberDemos

WebAR.rocks.face react fiber demos

Presentation

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/WebARRocksFace/dist and src/js/contrib/WebARRocksFace/neuralNets.

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

Webpack boilerplate original doc

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

Development server

npm start

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

Production build

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

Features

• Webpack
• Babel
• Sass
• PostCSS

Dependencies

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. (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.
  • 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.

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