3D開發-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

與上述使用方式類似