reactThreeFiberDemo

FaceFilter react fiber demo

Presentation

This demo 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. This is only a boilerplate, displaying a simple mesh. It also handles screen resizing / orientation change.

Jeeliz FaceFilter is used through the NPM facefilter package.

If you have any questions about Webpack / React / Three-fiber, you are welcome to ask them on a Webpack / React / Three-fiber board.

Webpack boilerplate original doc

This demo is based on Webpack boilerplate made by Tania Rascia and released under MIT software license. It is an amazing work to start quickly webpack projects!

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.