1. Get the mark
For the dev.html page:
What do these few lines of code mean? It is a matching rule. The matched file is the Market logo in the data directory. To put it bluntly, the camera recognizes this mark. The official example gives the mark pattern-hiro, the source image of this mark. Corresponding to the image/hiro.png in the data directory, how to use this image to generate the patt.hiro tag? At this time, we need to use an SDK tool, which is small and lightweight. Don’t worry about it. Installation package. This tool is called artoolkit, which is the AR toolbox and can be downloaded from Baidu. It is recommended to download the latest one.
2. Custom mark
After the installation is complete, go to the D:\Program Files (x86)\ARToolKit5\bin directory. Next, we will customize a marker. The marker here is a traditional rectangular marker. The first-generation market will be added later. The market of natural pictures, I used div to draw the first-generation market here. The specific effects are as follows:
The outermost border should preferably be black and white. This is the recommended reference link market in the official document, and then save the screenshot of this effect to the SDK D:\Program Files (x86)\ARToolKit5\bin\image we just downloaded If there is no image directory, create a new one, use cmd to go to the D:\Program Files (x86)\ARToolKit5\bin directory, and run mk_patt.exe
The configuration options of the camera will pop up. The default is OK. After the camera is started, point the picture we just generated and point it at the camera. After the camera is recognized, a red and green border line will appear, and the recognized text in the upper left corner will appear. Please pay attention at this time Whether the direction of the text is correct.
Then click the left mouse button, return to the command line, enter the file name td.patt, and then find the file in the current Bin directory
Go back to the AR.js-master project, open the three.js/examples/marker-training/examples/pattern-files directory and put the newly generated logo file into it, and then go back to three.js/examples/dev.html , Modify the code
3. Modify the code
Part of the content is transferred from: https://zhuanlan.zhihu.com/p/26364493