easyar 是一个跨平台的增强现实开发平台，支持 iOS、Android、Windows、macOS 等多个操作系统。本教程介绍如何使用 easyar npm 包在前端开发中集成 easyar。
步骤一：安装 easyar 包
npm install easyar --save
在您的项目文件夹中，使用 npm 安装 easyar 包。
步骤二：引入相关资源
<script type="text/javascript" src="https://easyar.cn/libs/easyar.min.js"></script>
在您的 HTML 文件中，引入 easyar.js 文件。
步骤三：创建 easyar 引擎
const easyar = window.easyar;
const engine = new easyar.Engine({
licenseKey: "请输入你的 easyar 授权码"
});创建一个 easyar 引擎对象，并传入 licenseKey（授权码）。
步骤四：创建 easyar 相机
const cameraDevice = new easyar.CameraDevice({
cameraDeviceType: easyar.CameraDeviceType.Default
});创建一个 easyar 相机对象。cameraDeviceType 参数可设置为 easyar.CameraDeviceType.Front 或 easyar.CameraDeviceType.Back，分别对应前置和后置相机。
步骤五：渲染 easyar 相机
-- -------------------- ---- -------
----------------------------------------------- -------- -- -
----- ------ - --- ---------------
------------- ------------
---
--------------------- -- -
-- ----
---
---------------------------------------------
-- -------- ------- -
--------------------- -------
---打开摄像头，创建一个 GLView 对象，并插入到 DOM 树中。
步骤六：创建 target
const target = new easyar.ImageTarget({
path: 'targets/target.jpg',
name: 'target',
uid: 'target_uid'
});在您的项目中创建一个图像作为 target。path 参数为图像路径，name 为 target 名称，uid 为 target 的唯一标识。
步骤七：将 target 加载到识别器中
const imageTracker = new easyar.ImageTracker();
imageTracker.attachTarget(target, function () {
console.log('加载 target 成功');
}, function (error) {
console.log('无法加载 target', error);
});使用 ImageTracker 对象将 target 加载到识别器中。
步骤八：渲染 target
glView.setRenderer(new easyar.TargetRenderer(), function () {
const renderer = glView.renderer();
renderer.clearColor('#000000');
renderer.attachStreamer(cameraDevice);
renderer.attachTarget(imageTracker);
});在 start 方法中，将 TargetRenderer 对象添加到 GLView 渲染器列表，并在渲染器回调函数中，设置 clearColor、attachStreamer 和 attachTarget 方法。
步骤九：处理 target 点击事件
glView.addEventListener('click', function (event) {
const mouse = new easyar.Vec2F(event.clientX / window.innerWidth, 1.0 - event.clientY / window.innerHeight);
const hitTestResult = imageTracker.castMouseRay(cameraDevice, mouse);
if (hitTestResult && hitTestResult.target === target) {
console.log('点击到 target');
}
});为 GLView 绑定 click 事件，使用 castMouseRay 方法将鼠标点击位置转换为射线，并检测是否与 target 相交。
完整示例
-- -------------------- ---- -------
----- ------ - --------------
----- ------ - --- ---------------
----------- ------ ------ ----
---
----- ------------ - --- ---------------------
----------------- -------------------------------
---
----------------------------------------------- -------- -- -
----- ------ - --- ---------------
------------- ------------
---
-------------------------------- -------- ------- -
----- ----- - --- -------------------------- - ------------------ --- - ------------- - --------------------
----- ------------- - --------------------------------------- -------
-- -------------- -- -------------------- --- ------- -
---------------- ---------
-
---
----- ------ - --- --------------------
----- ---------------------
----- ---------
---- ------------
---
----- ------------ - --- ----------------------
--------------------------------- -------- -- -
--------------- ------ -----
-- -------- ------- -
----------------- -------- -------
---
---------------------- ------------------------ -------- -- -
----- -------- - ------------------
-------------------------------
--------------------------------------
------------------------------------
---
---------------------------------------------
--------------------- -- -
------------------- ---------
---
-- -------- ------- -
--------------------- -------
---总结
本文介绍了如何使用 easyar npm 包在前端开发中使用 easyar 计算机视觉库，包括安装 easyar 包、引入相关资源、创建 easyar 引擎、创建 easyar 相机、打开摄像头、创建 target、将 target 加载到识别器中、渲染 target 和处理 target 点击事件等步骤，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cc181e8991b448e63db