Face filters aid with Augmented Reality has been a fun factor for developers and users. It detects a face and displays a green sphere on the nose tip. This kit helps users to create their own real-time 3D masks and AR face filters. Please see below a sample solution kit to jumpstart your solution on Face Filters using threejs. To use this kit to build your own solution, scroll down to Kit Deployment Instruction section.

Development Environment

Visual studio code IDE is used for this development. It becomes easy and simple to develop an interactive UI with Visual studio code.

AR Libraries

Three.js is the open-source web framework used to develop augmented reality (AR) projects. Web-based augmented reality (WebAR) is the most advanced technology that allows users to access AR experiences directly from their smartphones.

Kit Solution Source

The mind-ar library added in this section is primarily used to create Face Filter using threejs project. The entire solution is available as a package to download from the source code repository.

Kit Deployment Instructions

Follow the below instructions to deploy and run the solution. 1. Download, extract and double-click kit_installer file to install the kit. 2. After successful installation of the kit, press 'Y' to run the kit. 3. To run the kit manually, press 'N' and locate the zip file 'mind-ar-js'. 4. Open folder in Visual Studio Code. 5. Run the 'face_threejs.html' file. 6. Click start button to experience the filter effect which points the nose. 7. Now, you will experience Augmented Reality in your own Environment!


1. While running batch file, if you encounter Windows protection alert, select More info --> Run anyway 2. During kit installer, if you encounter a Windows security alert, click Allow


If you need help to use this kit, you can email us at kandi.support@openweaver.com or direct message us on Twitter Message @OpenWeaverInc.