better handling of demo-scenes

three.js/examples/demo-scenes/examples/demo-scenes.html

@@ -53,16 +53,15 @@
 		// antialias	: true,
 		alpha: true
 	});
-
-renderer.shadowMap.type = THREE.PCFSoftShadowMap
-renderer.shadowMap.enabled = true;
 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
-	// renderer.setPixelRatio( 2 );
 	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 );
+	// enable shadow in renderer
+	renderer.shadowMap.type = THREE.PCFSoftShadowMap
+	renderer.shadowMap.enabled = true;	
 
 	// array of functions for the rendering loop
 	var onRenderFcts= [];
@@ -156,13 +155,7 @@ window.arToolkitSource = arToolkitSource
 	// build a smoothedControls
 	var smoothedRoot = new THREE.Group()
 	scene.add(smoothedRoot)
-	var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot, {
-		lerpPosition: 0.9,
-		lerpQuaternion: 0.9,
-		lerpScale: 0.9,
-		// minVisibleDelay: 1,
-		// minUnvisibleDelay: 1,
-	})
+	var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot)
 	onRenderFcts.push(function(delta){
 		smoothedControls.update(markerRoot)
 	})	

three.js/examples/multi-markers/examples/player.html

@@ -39,6 +39,16 @@
 	by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
 </div>
 <div style='position: absolute; bottom: 10px; width:100%; text-align: center;z-index:1';>
+	Scenes: 
+		<a href='javascript:void(0)' onclick='javascript: switchDemoScene("torus")'>torus</a>
+		- <a href='javascript:void(0)' onclick='javascript: switchDemoScene("glassTorus")'>glassTorus</a>
+		- <a href='javascript:void(0)' onclick='javascript: switchDemoScene("holePortal")'>holePortal</a>
+		- <a href='javascript:void(0)' onclick='javascript: switchDemoScene("holeTorus")'>holeTorus</a>
+		- <a href='javascript:void(0)' onclick='javascript: switchDemoScene("holePool")'>holePool</a> 
+		- <a href='javascript:void(0)' onclick='javascript: switchDemoScene("minecraft")'>minecraft</a> 
+		- <a href='javascript:void(0)' onclick='javascript: switchDemoScene("shaddowTorusKnot")'>shaddowTorusKnot</a> 
+	<br>
+	<br>
 	Area source: 
 		<a href='javascript:void(0)' onclick='urlOptions.areaSource = "localStorage"; reload()'>localStorage</a>
 		/
@@ -49,15 +59,6 @@
 		<a href='javascript:void(0)' onclick='urlOptions.markerHelpers = true; reload()'>yes</a>
 		/
 		<a href='javascript:void(0)' onclick='urlOptions.markerHelpers = false; reload()'>no</a>
-	<br>
-	Scenes: 
-		<a href='javascript:void(0)' onclick='javascript: switchDemoScene("torus")'>torus</a>
-		- <a href='javascript:void(0)' onclick='javascript: switchDemoScene("glassTorus")'>glassTorus</a>
-		- <a href='javascript:void(0)' onclick='javascript: switchDemoScene("holePortal")'>holePortal</a>
-		- <a href='javascript:void(0)' onclick='javascript: switchDemoScene("holeTorus")'>holeTorus</a>
-		- <a href='javascript:void(0)' onclick='javascript: switchDemoScene("holePool")'>holePool</a> 
-		- <a href='javascript:void(0)' onclick='javascript: switchDemoScene("minecraft")'>minecraft</a> 
-		- <a href='javascript:void(0)' onclick='javascript: switchDemoScene("shaddowTorusKnot")'>shaddowTorusKnot</a> 
 </div>
 <div style='position: fixed; bottom: 16px; right: 16px; z-index:1';>
 	<a id='recordButton' href='learner.html?url=player.html'>
@@ -82,6 +83,9 @@
 	renderer.domElement.style.top = '0px'
 	renderer.domElement.style.left = '0px'
 	document.body.appendChild( renderer.domElement );
+	// enable shadow in renderer
+	renderer.shadowMap.type = THREE.PCFSoftShadowMap
+	renderer.shadowMap.enabled = true;	
 
 	// array of functions for the rendering loop
 	var onRenderFcts= [];
@@ -146,42 +150,10 @@
 
 
 	//////////////////////////////////////////////////////////////////////////////
-	//		Parameters of the multimarkers for this application
+	//		init learnerParameters and markersControlsParameters
 	//////////////////////////////////////////////////////////////////////////////
 
-	
-	// var markersControlsParameters = [
-	// 	{
-	// 		type : 'pattern',
-	// 		patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
-	// 	},
-	// 	{
-	// 		type : 'pattern',
-	// 		patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
-	// 	},
-	// ]
-
-	// // pattern a/b/c/f
-	// var markersControlsParameters = [
-	// 	{
-	// 		type : 'pattern',
-	// 		patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.a',
-	// 	},
-	// 	{
-	// 		type : 'pattern',
-	// 		patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.b',
-	// 	},
-	// 	{
-	// 		type : 'pattern',
-	// 		patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.c',
-	// 	},
-	// 	{
-	// 		type : 'pattern',
-	// 		patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.f',
-	// 	},
-	// ]
-
-	// pattern a/b/c/f
+	// pattern hiro/kanji/a/b/c/f
 	var markersControlsParameters = [
 		{
 			type : 'pattern',
@@ -209,17 +181,13 @@
 		},
 	]
 
-	//////////////////////////////////////////////////////////////////////////////
-	//		init #recordButton 
-	//////////////////////////////////////////////////////////////////////////////
 	var learnerParameters = {
-		backURL : 'player.html'+location.hash,
+		backURL : 'player.html',
 		markersControlsParameters: markersControlsParameters,
 	}	
-	document.querySelector('#recordButton').href = 'learner.html#'+JSON.stringify(learnerParameters)	
 
 	////////////////////////////////////////////////////////////////////////////////
-	//          Create a ArMarkerControls
+	//          handle urlOptions
 	////////////////////////////////////////////////////////////////////////////////
 
 	var hasHash = location.hash.substring(1) !== '' ? true : false
@@ -229,78 +197,39 @@
 		var urlOptions = {
 			areaSource : 'localStorage',
 			markerHelpers: false,
+			sceneName: 'torus',
 		}
 	}
 	window.urlOptions = urlOptions
+	urlOptionsUpdate()
 	window.reload = function(){
-		location.hash = '#'+JSON.stringify(urlOptions)
+		urlOptionsUpdate()
 		location.reload()
 	}
-
-	if( location.hash.substring(1) === '' )	location.hash = '#'+JSON.stringify(urlOptions)
+	function urlOptionsUpdate(){
+		location.hash = '#'+JSON.stringify(urlOptions)
+		learnerParameters.backURL= 'player.html'+location.hash
+		document.querySelector('#recordButton').href = 'learner.html#'+JSON.stringify(learnerParameters)	
+	}
 	
 	if( urlOptions.areaSource === 'localStorage' && localStorage.getItem('ARjsMultiMarkerFile') === null ){
 		alert('No area has been learned on this device!\n Forwarding you to the learning application.')
 		location.href = document.querySelector('#recordButton').href		
 	}
 	
-	
 	if( urlOptions.areaSource === 'localStorage' ){
 		console.assert( localStorage.getItem('ARjsMultiMarkerFile') !== null )
-		multiMarkerPlay(localStorage.getItem('ARjsMultiMarkerFile'))
+		multiMarkerFile = localStorage.getItem('ARjsMultiMarkerFile')
 	}else if( urlOptions.areaSource === 'hardcoded' ){
-		multiMarkerPlayHarcoded()
+		console.assert(false)
+		multiMarkerFile = buildMarkerPlayHarcoded()
 	}else{
 		console.assert('unknown areaSource', areaSource)
 	}
 
-
-
 	//////////////////////////////////////////////////////////////////////////////
-	//		Code Separator
+	//		Create ArMultiMarkerControls
 	//////////////////////////////////////////////////////////////////////////////
-
-	function multiMarkerPlayHarcoded(){
-		
-		var interMarkerWidth = 2.61
-
-		var multiMarkerFile = {
-			subMarkersControls : [
-				{
-					parameters: {
-						type : 'pattern',
-						patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.a',
-					},
-					poseMatrix: new THREE.Matrix4().makeTranslation(0,0, 0).toArray()
-				},
-				{
-					parameters: {
-						type : 'pattern',
-						patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.b',
-					},
-					poseMatrix: new THREE.Matrix4().makeTranslation(interMarkerWidth,0, 0).toArray()
-				},
-				{
-					parameters: {
-						type : 'pattern',
-						patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.c',
-					},
-					poseMatrix: new THREE.Matrix4().makeTranslation(interMarkerWidth*2, 0, 0).toArray()
-				},
-				// {
-				// 	parameters: {
-				// 		type : 'pattern',
-				// 		patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.f',
-				// 	},
-				// 	poseMatrix: new THREE.Matrix4().makeTranslation(interMarkerWidth*2, 0, interMarkerWidth).toArray()
-				// },
-			]
-		}
-
-		multiMarkerPlay(JSON.stringify(multiMarkerFile))
-	}
-
-	function multiMarkerPlay(multiMarkerFile){
 	// build a markerRoot
 	var markerRoot = new THREE.Group()
 	scene.add(markerRoot)
@@ -340,13 +269,11 @@
 	
 	var averageMatrix = THREEx.ArMultiMarkerControls.computeCenter(multiMarkerFile)
 	averageMatrix.decompose(demoObject3d.position, demoObject3d.quaternion, demoObject3d.scale)
-		demoObject3d.scale.multiplyScalar(6)
+	demoObject3d.scale.multiplyScalar(3)
 
 	// create the markerScene based on sceneName
-		var sceneName = location.hash.substring(1) || 'torus'
-		var sceneName = 'minecraft'
 	var markerScene = null
-		switchDemoScene(sceneName)
+	switchDemoScene(urlOptions.sceneName)
 
 	// function to dynamically switch demoScenes
 	function switchDemoScene(newSceneName){
@@ -359,35 +286,12 @@
 		// create the new markerScene
 		markerScene = demoScenes.createMarkerScene(newSceneName)	
 		demoObject3d.add( markerScene )
-		}	
-		window.switchDemoScene = switchDemoScene	
 
-		
-
-		// //////////////////////////////////////////////////////////////////////////////////
-		// //		add an object in the scene
-		// //////////////////////////////////////////////////////////////////////////////////
-		// 
-		// var demoContent = new THREEx.DemoContent()
-		// onRenderFcts.push(function(delta){
-		// 	demoContent.update(delta)
-		// })	
-		// var markerContent = demoContent.createMarkerScene('holePool')
-		// 
-		// // compute the average matrix of this markerFile
-		// var markerScene = new THREE.Group()
-		// markerScene.add(markerContent)
-		// markerRoot.add( markerScene )
-		// 
-		// var averageMatrix = THREEx.ArMultiMarkerControls.computeCenter(multiMarkerFile)
-		// averageMatrix.decompose(markerScene.position, markerScene.quaternion, markerScene.scale)
-		// markerScene.scale.multiplyScalar(5)
+		// update urlOptions.sceneName
+		urlOptions.sceneName = newSceneName
+		urlOptionsUpdate()
 	}	
-
-	//////////////////////////////////////////////////////////////////////////////
-	//		Hard coded
-	//////////////////////////////////////////////////////////////////////////////
-
+	window.switchDemoScene = switchDemoScene	
 
 	//////////////////////////////////////////////////////////////////////////////////
 	//		render the whole thing on the page
@@ -414,5 +318,48 @@
 			onRenderFct(deltaMsec/1000, nowMsec/1000)
 		})
 	})
+	//////////////////////////////////////////////////////////////////////////////
+	//		Code Separator
+	//////////////////////////////////////////////////////////////////////////////
+
+	function buildMarkerPlayHarcoded(){
+		
+		var interMarkerWidth = 2.61
+
+		var multiMarkerFile = {
+			subMarkersControls : [
+				{
+					parameters: {
+						type : 'pattern',
+						patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.a',
+					},
+					poseMatrix: new THREE.Matrix4().makeTranslation(0,0, 0).toArray()
+				},
+				{
+					parameters: {
+						type : 'pattern',
+						patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.b',
+					},
+					poseMatrix: new THREE.Matrix4().makeTranslation(interMarkerWidth,0, 0).toArray()
+				},
+				{
+					parameters: {
+						type : 'pattern',
+						patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.c',
+					},
+					poseMatrix: new THREE.Matrix4().makeTranslation(interMarkerWidth*2, 0, 0).toArray()
+				},
+				// {
+				// 	parameters: {
+				// 		type : 'pattern',
+				// 		patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.f',
+				// 	},
+				// 	poseMatrix: new THREE.Matrix4().makeTranslation(interMarkerWidth*2, 0, interMarkerWidth).toArray()
+				// },
+			]
+		}
+
+		return multiMarkerFile
+	}
 // })()
 </script></body>

three.js/threex-arsmoothedcontrols.js

@@ -23,11 +23,11 @@ THREEx.ArSmoothedControls = function(object3d, parameters){
 	parameters = parameters || {}
 	this.parameters = {
 		// lerp coeficient for the position - between [0,1] - default to 1
-		lerpPosition: parameters.lerpPosition !== undefined ? parameters.lerpPosition : 0.3,
+		lerpPosition: parameters.lerpPosition !== undefined ? parameters.lerpPosition : 0.8,
 		// lerp coeficient for the quaternion - between [0,1] - default to 1
-		lerpQuaternion: parameters.lerpQuaternion !== undefined ? parameters.lerpQuaternion : 0.6,
+		lerpQuaternion: parameters.lerpQuaternion !== undefined ? parameters.lerpQuaternion : 0.8,
 		// lerp coeficient for the scale - between [0,1] - default to 1
-		lerpScale: parameters.lerpScale !== undefined ? parameters.lerpScale : 0.6,
+		lerpScale: parameters.lerpScale !== undefined ? parameters.lerpScale : 0.8,
 		// delay for lerp fixed steps - in seconds - default to 1/120
 		lerpStepDelay: parameters.fixStepDelay !== undefined ? parameters.fixStepDelay : 1/60,
 		// minimum delay the sub-control must be visible before this controls become visible - default to 0 seconds