diff --git a/README.md b/README.md index 384df6f5a93d102baa0f4b6475e5b8e7c4b8d393..c2bc96ebb708f98bde40cef13cff2e0d53e452b9 100644 --- a/README.md +++ b/README.md @@ -183,7 +183,7 @@ Three.js Examples: - [parameters-tunning](https://jeromeetienne.github.io/AR.js/three.js/examples/parameters-tunning.html) : three.js example for parameters-tunning ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/parameters-tunning.html)) -- [multimarker](https://jeromeetienne.github.io/AR.js/three.js/examples/multi-markers/examples/player.html) : +- [multi-markers](https://jeromeetienne.github.io/AR.js/three.js/examples/multi-markers/examples/player.html) : multi markers examples - it shows how to dynamically learn a multi markers and then how to use it. learner.html is a example of dynamic learning of a multi markers configuration. It has been designed to be reusable. diff --git a/three.js/examples/mobile-performance.html b/three.js/examples/mobile-performance.html index 1a5cf6be35e8a88af1be630bfaf2bfef8c4c1484..d5033aa5f0723d1b73987573f65eb311cee35ec1 100644 --- a/three.js/examples/mobile-performance.html +++ b/three.js/examples/mobile-performance.html @@ -34,13 +34,6 @@ // init scene and camera var scene = new THREE.Scene(); - - var ambient = new THREE.AmbientLight( 0x666666 ); - scene.add( ambient ); - - var directionalLight = new THREE.DirectionalLight( 0x887766 ); - directionalLight.position.set( -1, 1, 1 ).normalize(); - scene.add( directionalLight ); ////////////////////////////////////////////////////////////////////////////////// // Initialize a basic camera diff --git a/three.js/examples/multi-markers/examples/learner.html b/three.js/examples/multi-markers/examples/learner.html index c9a8c66dacfd1e576669825419c259ed65693c06..ea1d04a5b495dca209ba66a9537a6b9b224fa5cc 100644 --- a/three.js/examples/multi-markers/examples/learner.html +++ b/three.js/examples/multi-markers/examples/learner.html @@ -91,11 +91,11 @@ // // to read from an image // sourceType : 'image', - // sourceUrl : '../../../../data/images/multimarker.jpg' + // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/multimarker.jpg' // to read from a video // sourceType : 'video', - // sourceUrl : '../../../../data/videos/headtracking.mp4', + // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4', }) @@ -116,11 +116,12 @@ // create atToolkitContext var arToolkitContext = new THREEx.ArToolkitContext({ - cameraParametersUrl: '../../../../data/data/camera_para.dat', + cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat', detectionMode: 'mono', maxDetectionRate: 30, - canvasWidth: 80*4, - canvasHeight: 60*4, + // high accuracy of detection on purpose - important during learning + // canvasWidth: 80*4, + // canvasHeight: 60*4, // debug: true, }) // initialize it @@ -142,37 +143,61 @@ var hasHash = location.hash.substring(1) !== '' ? true : false if( hasHash === true ){ - var jsonData = JSON.parse(location.hash.substring(1)) - var backURL = jsonData.backURL - var markersControlsParameters = jsonData.markersControlsParameters + var urlOptions = JSON.parse(location.hash.substring(1)) + }else{ + var urlOptions = { + backURL : null, + markerControlsParameters : [], + } + alert('should not happen') } // prepare the parameters var subMarkersControls = [] - markersControlsParameters.forEach(function(markerControlsParameters){ + urlOptions.markersControlsParameters.forEach(function(markerControlsParameters){ // create a markerRoot - var object3d = new THREE.Object3D() - scene.add(object3d) + var markerRoot = new THREE.Group() + scene.add(markerRoot) + + // create markerControls for our markerRoot + var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, markerControlsParameters) + - // create markerControls for our object3d - var markerControls = new THREEx.ArMarkerControls(arToolkitContext, object3d, markerControlsParameters) + // TODO here put a THREEx.ArSmoothedControls behind a flag - could be useful for tunning + var smoothedControls = null + if( false ){ + // build a smoothedControls + var smoothedRoot = new THREE.Group() + scene.add(smoothedRoot) + var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot) + onRenderFcts.push(function(){ + smoothedControls.update(markerRoot) + }) + } - if( true ){ - // add an helper to visuable each sub-marker - var markerHelper = new THREEx.ArMarkerHelper(markerControls) + // add an helper to visuable each sub-marker + var markerHelper = new THREEx.ArMarkerHelper(markerControls) + if( smoothedControls !== null ){ + smoothedControls.object3d.add( markerHelper.object3d ) + }else{ markerControls.object3d.add( markerHelper.object3d ) } - // TODO here put a THREEx.ArSmoothedControls behind a flag - could be useful for tunning + + // store it in the parameters - subMarkersControls.push(markerControls) + if( smoothedControls !== null ){ + subMarkersControls.push(smoothedControls) + }else { + subMarkersControls.push(markerControls) + } }) - var multiMarkerLearning = new THREEx.ArMultiMakersLearning(subMarkersControls) -window.multiMarkerLearning = multiMarkerLearning + var multiMarkerLearning = new THREEx.ArMultiMakersLearning(arToolkitContext, subMarkersControls) +// window.multiMarkerLearning = multiMarkerLearning multiMarkerLearning.enabled = false ////////////////////////////////////////////////////////////////////////////// @@ -208,27 +233,27 @@ window.multiMarkerLearning = multiMarkerLearning // generate json file and store it var jsonString = multiMarkerLearning.toJSON() console.log('Writing multiMarkerFile', jsonString) - localStorage.setItem('sampleMultiMarkerFile', jsonString); + localStorage.setItem('ARjsMultiMarkerFile', jsonString); // update application status updateAppStatus() } // honor ?url= if present - if( backURL !== null ){ + if( urlOptions.backURL !== null ){ setTimeout(function(){ - location.href = backURL + location.href = urlOptions.backURL }, 1) } } function onRecordClear(){ - localStorage.removeItem('sampleMultiMarkerFile') + localStorage.removeItem('ARjsMultiMarkerFile') updateAppStatus() } function updateAppStatus(){ - var multiMarkerFile = localStorage.getItem('sampleMultiMarkerFile'); + var multiMarkerFile = localStorage.getItem('ARjsMultiMarkerFile'); if( multiMarkerFile === null ){ document.querySelector('#dataStatus').innerHTML = 'none' }else{ diff --git a/three.js/examples/multi-markers/examples/player.html b/three.js/examples/multi-markers/examples/player.html index 8205a7e58bbb0a654be0e20c1be8a753d483f96d..9fc80f38ef49aa8acdfed346eb57d624b1d12131 100644 --- a/three.js/examples/multi-markers/examples/player.html +++ b/three.js/examples/multi-markers/examples/player.html @@ -33,10 +33,14 @@
Record new area
+ Markers Helper : + enable + / + disable appMode : - stored - / - hardcoded + stored + / + hardcoded