clean up + initial load/save markerScenes

three.js/examples/webar-playground/TODO.md

@@ -8,9 +8,14 @@
 
 # Demo.html
 
-- get unique name when creating object
 - make it possible to save/load scene from json - put json in url - thus shareable
+  - each markerScene got a name/type/position/orientation/scale
+  - a fullScene is an array of those
+  - need to be able to build a json from current structure
+  - need to be able to parse this json and create the matching scene tree
 - remove the sceneName='' in the url - just store the whole scene
+
+- get unique name when creating object
 - DONE add holographic message
 
 - picking doesnt work on mobile

three.js/examples/webar-playground/demo.html

@@ -219,7 +219,6 @@
 
 	
 	document.querySelector('#recordButton').addEventListener('click', function(){
-
 		urlOptions.areaSource = 'localStorage'	
 		urlOptionsUpdate()
 
@@ -229,6 +228,63 @@
 		}	
 		location.href = THREEx.ArToolkitContext.baseURL + 'examples/multi-markers/examples/learner.html#'+JSON.stringify(learnerParameters)
 	})
+window.fullSceneToJSON = fullSceneToJSON
+
+	function markerScenesUpdated(){
+		
+	}
+
+	function fullSceneToJSON(){
+		var jsonData = {
+			markerScenes: []
+		}
+		
+		markerScenes.forEach(function(markerScene){
+			var parentObject3D = markerScene.parent
+			jsonData.markerScenes.push({
+				type: markerScene.userData.sceneType,
+				position: {
+					x: parentObject3D.position.x,
+					y: parentObject3D.position.y,
+					z: parentObject3D.position.z,
+				},
+				quaternion: {
+					x: parentObject3D.quaternion.x,
+					y: parentObject3D.quaternion.y,
+					z: parentObject3D.quaternion.z,
+					w: parentObject3D.quaternion.w,
+				},
+				scale: {
+					x: parentObject3D.scale.x,
+					y: parentObject3D.scale.y,
+					z: parentObject3D.scale.z,
+				},
+			})
+		})
+		
+		return jsonData
+	}
+
+	function fullSceneFromJSON(jsonData){
+		jsonData.markerScenes.forEach(function(item){
+			createScene(item.type)
+			
+			var parentObject3D = selectedMarkerScene.parent
+
+			parentObject3D.position.x = item.position.x
+			parentObject3D.position.y = item.position.y
+			parentObject3D.position.z = item.position.z
+
+			parentObject3D.quaternion.x = item.quaternion.x
+			parentObject3D.quaternion.y = item.quaternion.y
+			parentObject3D.quaternion.z = item.quaternion.z
+			parentObject3D.quaternion.w = item.quaternion.w
+
+			parentObject3D.scale.x = item.scale.x
+			parentObject3D.scale.y = item.scale.y
+			parentObject3D.scale.z = item.scale.z
+		})
+	}
 
 	////////////////////////////////////////////////////////////////////////////////
 	//          handle urlOptions

three.js/examples/webar-playground/js/threex-demoscenes.js

@@ -23,27 +23,29 @@ THREEx.ARjsDemoScenes.prototype.dispose = function (delta) {
 }
 
 THREEx.ARjsDemoScenes.prototype.createMarkerScene = function (sceneName) {
+	var markerScene = null
 
 	if( sceneName === 'torus' ){
-		return this._createTorus()
+		markerScene = this._createTorus()
 	}else if( sceneName === 'glassTorus' ){
-		return this._createGlassTorus()
+		markerScene = this._createGlassTorus()
 	}else if( sceneName === 'holeTorus' ){
-		return this._createHoleTorus()
+		markerScene = this._createHoleTorus()
 	}else if( sceneName === 'holePortal' ){
-		return this._createHolePortal()
+		markerScene = this._createHolePortal()
 	}else if( sceneName === 'holePool' ){
-		return this._createHolePool()
+		markerScene = this._createHolePool()
 	}else if( sceneName === 'minecraft' ){
-		return this._createMinecraft()
+		markerScene = this._createMinecraft()
 	}else if( sceneName === 'shaddowTorusKnot' ){
-		return this._createShaddowTorusKnot()
+		markerScene = this._createShaddowTorusKnot()
 	}else if( sceneName === 'holographicMessage' ){
-		return this._createHolographicMessage()
+		markerScene = this._createHolographicMessage()
 	}else{
 		console.assert(false)
 	}
-	return null
+	markerScene.userData.sceneType = sceneName
+	return markerScene
 }
 //////////////////////////////////////////////////////////////////////////////
 //		Code Separator