<!DOCTYPE html> <meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'> <title>AR.js Test Runner</title> <!-- three.js library --> <script src='../examples/vendor/three.js/build/three.js'></script> <!-- include ar.js and ar-threex.js --> <script src="../build/ar.js"></script> <script src="../build/ar-threex.js"></script> <script>THREEx.ArToolkitContext.baseURL = '../'</script> <body style='margin : 0px; overflow: hidden; font-family: Monospace;'> <div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'> <a href='https://github.com/AR-js-org/AR.js/' target='_blank'>AR.js</a> - Session API demo with multi tracking and hit testing - by <a href='https://twitter.com/nicolocarp' target='_blank'>@nicolocarp</a> <br /> <a href='../../three.js/examples/multi-markers/markers-page/' target='_blank'>Markers page</a> <br /> <strong>Tracking Backend:</strong> <a href='?artoolkit'>artoolkit</a> / <a href='?area-artoolkit'>area artoolkit</a> / <a href='?best'>best</a> </div> <script> // ;(function(){ // get tracking method from location.search var trackingMethod = location.search.substring(1) ? location.search.substring(1) : 'best' ////////////////////////////////////////////////////////////////////////////////// // Init ////////////////////////////////////////////////////////////////////////////////// // init renderer var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.autoClear = false; renderer.setClearColor(new THREE.Color('lightgrey'), 0) renderer.setSize(window.innerWidth, window.innerHeight); renderer.domElement.style.position = 'absolute' renderer.domElement.style.top = '0px' renderer.domElement.style.left = '0px' document.body.appendChild(renderer.domElement); // array of functions for the rendering loop var onRenderFcts = []; // init scene and camera var scene = new THREE.Scene(); ////////////////////////////////////////////////////////////////////////////////// // Initialize the camera ////////////////////////////////////////////////////////////////////////////////// var camera = ARjs.Utils.createDefaultCamera(trackingMethod) scene.add(camera) //////////////////////////////////////////////////////////////////////////////// // Set up Arjs.Profile //////////////////////////////////////////////////////////////////////////////// var arProfile = new ARjs.Profile().trackingMethod(trackingMethod) if (arProfile.contextParameters.trackingBackend === 'artoolkit') { // arProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../test/data/images/markers-page-ipad.jpg') arProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../test/data/images/markers-page-ipad-640x480.jpg') // arProfile.sourceImage('/data/images/img.jpg') // arProfile.sourceVideo(THREEx.ArToolkitContext.baseURL + '../test/data/videos/markers-page-ipad.mp4') } else console.assert(false) arProfile.defaultMarker() arProfile.checkIfValid() ////////////////////////////////////////////////////////////////////////////// // build ARjs.Session ////////////////////////////////////////////////////////////////////////////// ARjs.AnchorDebugUI.MarkersAreaLearnerURL = ARjs.Context.baseURL + 'examples/multi-markers/examples/learner-testrunner.html' var arSession = new ARjs.Session({ scene: scene, renderer: renderer, camera: camera, sourceParameters: arProfile.sourceParameters, contextParameters: arProfile.contextParameters }) onRenderFcts.push(function () { arSession.update() }) //////////////////////////////////////////////////////////////////////////////// // Create a ARjs.Anchor //////////////////////////////////////////////////////////////////////////////// var arAnchor = new ARjs.Anchor(arSession, arProfile.defaultMarkerParameters) onRenderFcts.push(function () { arAnchor.update() }) ////////////////////////////////////////////////////////////////////////////// // handle Hit Tester ////////////////////////////////////////////////////////////////////////////// var hitTesting = new ARjs.HitTesting(arSession) onRenderFcts.push(function () { hitTesting.update(camera, arAnchor.object3d, arAnchor.parameters.changeMatrixMode) }) ////////////////////////////////////////////////////////////////////////////////// // add an object to the arAnchor ////////////////////////////////////////////////////////////////////////////////// var arWorldRoot = arAnchor.object3d var mesh = new THREE.AxesHelper() arWorldRoot.add(mesh) // add a torus knot var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshNormalMaterial({ transparent: true, opacity: 0.5, side: THREE.DoubleSide }); var mesh = new THREE.Mesh(geometry, material); mesh.position.y = geometry.parameters.height / 2 arWorldRoot.add(mesh); // var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16); // var material = new THREE.MeshNormalMaterial(); // var mesh = new THREE.Mesh( geometry, material ); // mesh.position.y = 0.5 // arWorldRoot.add( mesh ); // // onRenderFcts.push(function(delta){ // mesh.rotation.x += Math.PI*delta // }) ////////////////////////////////////////////////////////////////////////////// // DebugUI ////////////////////////////////////////////////////////////////////////////// // create arjsDebugUIContainer if needed if (document.querySelector('#arjsDebugUIContainer') === null) { var domElement = document.createElement('div') domElement.id = 'arjsDebugUIContainer' domElement.setAttribute('style', 'position: fixed; bottom: 10px; width:100%; text-align: center; z-index: 1;color: grey;') document.body.appendChild(domElement) } var sessionDebugUI = new ARjs.SessionDebugUI(arSession, null) document.querySelector('#arjsDebugUIContainer').appendChild(sessionDebugUI.domElement) var anchorDebugUI = new ARjs.AnchorDebugUI(arAnchor) document.querySelector('#arjsDebugUIContainer').appendChild(anchorDebugUI.domElement) ////////////////////////////////////////////////////////////////////////////////// // render the whole thing on the page ////////////////////////////////////////////////////////////////////////////////// // render the scene onRenderFcts.push(function () { // Render the see through camera scene renderer.clear() // render hitTesting pickingPlane - for debug var renderHitTestingPickingPlane = false if (renderHitTestingPickingPlane && hitTesting._hitTestingPlane) { hitTesting._hitTestingPlane.renderDebug(renderer) } renderer.render(scene, camera); }) // run the rendering loop var lastTimeMsec = null requestAnimationFrame(function animate(nowMsec) { // keep looping requestAnimationFrame(animate); // measure time lastTimeMsec = lastTimeMsec || nowMsec - 1000 / 60 var deltaMsec = Math.min(200, nowMsec - lastTimeMsec) lastTimeMsec = nowMsec // call each update function onRenderFcts.forEach(function (onRenderFct) { onRenderFct(deltaMsec / 1000, nowMsec / 1000) }) }) // })() </script> </body>