WebAR 本地识别与跟踪实现

lzshenyun

已于 2022-08-07 14:03:06 修改

阅读量469

点赞数

分类专栏： WebAR 文章标签： html5 javascript typescript

于 2022-08-07 14:00:45 首次发布

本文链接：https://blog.csdn.net/lzshenyun/article/details/126210428

版权

本文介绍了如何实现WebAR的本地识别与跟踪功能，包括初始化WebAR、打开相机、加载特征数据、云识别后的本地跟踪以及暂停/恢复跟踪。通过使用HTML5、JavaScript和TypeScript，结合three.js进行3D渲染。技术支持来自无间科技，完整的代码可以在GitHub项目webar-track中查看。

摘要由CSDN通过智能技术生成

3D渲染 threejs。

技术支持：无间科技

完整代码请查看https://github.com/wujianar/webar-track

1. 初始化WebAR

// 初始化WebAR
this.webAR = new window.WUJIAN.WebAR({
    container: container,
    endpointUrl: 'https://iss-cn2.wujianar.com',
    token: 'MDU5........UzNjU2MjIwfQ==',
    scaleOffset: new THREE.Vector3(1.5, 3, 4),
});

// 设置threejs
this.webAR.setThree({ scene: this.scene, camera: this.camera, renderer: this.renderer });

2. 打开相机

this.webAR.openCamera().then(() => {
    // 相机打开后加载本地特征数据，加载模型等。
}).catch((err: any) => {
});

3. 加载特征数据及跟踪

// 使用预编译好的特征数据
this.webAR.loadData('assets/data/kl.dat').then(() => {
    this.addCube();
    this.render();

    // 打开跟踪功能
    this.webAR.start();
}).catch