AR.js专题-多Marker追踪支持

支持2个marker跟踪

代码参考

ARjs/three.js/examples/measure-it.html

// 支持追踪两个目标

//////////////////////////////////////////////////////////////////////////////

// markerRoot1

//////////////////////////////////////////////////////////////////////////////

// build markerControls

var markerRoot1 = new THREE.Group

markerRoot1.name = 'marker1'

scene.add(markerRoot1)

var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {

type: 'pattern',

patternUrl: "../../res/arjs/data/pattern-letterA.patt",

// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',

})

// add a gizmo in the center of the marker

var geometry = new THREE.OctahedronGeometry(0.1, 0)

var material = new THREE.MeshNormalMaterial({

wireframe: true

});

var mesh = new THREE.Mesh(geometry, material);

markerRoot1.add(mesh);

//////////////////////////////////////////////////////////////////////////////

// markerRoot2

//////////////////////////////////////////////////////////////////////////////

// build markerControls

var markerRoot2 = new THREE.Group

markerRoot2.name = 'marker2'

scene.add(markerRoot2)

var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot2, {

type: 'pattern',

// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',

patternUrl: "../../res/arjs/data/pattern-letterB.patt",

})

// add a gizmo in the center of the marker

var geometry = new THREE.OctahedronGeometry(0.1, 0)

var material = new THREE.MeshNormalMaterial({

wireframe: true

});

var mesh = new THREE.Mesh(geometry, material);

markerRoot2.add(mesh);

创建更多Marker

AR-Examples-master/custom-patterns.html

与上述使用方式类似