ghost replay example

index.html

@@ -3030,6 +3030,7 @@ let gatesToPass = ["gate1","gate2","gate3"]
 let gatesPassed = []
 let firstGatePassed
 let lapDurations = []
+let lapPoses = []
 AFRAME.registerComponent('gate-through', {
   dependencies: ['raycaster'],
 
@@ -3050,9 +3051,35 @@ AFRAME.registerComponent('gate-through', {
 	    firstGatePassed = null
 	}
     });
+    this.tick = AFRAME.utils.throttleTick(this.tick, 10, this);
+  },
+  tick: function(){
+    p = new THREE.Vector3(); 
+    r = new THREE.Quaternion(); 
+	playerwithbody.object3D.getWorldPosition(p); 
+	playerwithbody.object3D.getWorldQuaternion(r); 
+	if (gatesPassed.includes(gatesToPass[0]))
+		lapPoses.push({position:p,rotation:r,timetamp:Date.now()})
   }
 });
 
+function replayLastLap(){
+	ghost = playerwithbody.cloneNode()
+	ghost.id = "ghost"
+	AFRAME.scenes[0].appendChild(ghost)
+	ghost.setAttribute("visible", true)
+	ghost.setAttribute("material", "transparent: true;opacity:.5")
+	i=0
+	replay = setInterval( _=>{
+		ghost.setAttribute("position", lapPoses[++i].position)
+		ghost.object3D.quaternion.copy(lapPoses[i].rotation)
+		if (i==lapPoses.length-1){
+			clearInterval(replay)
+			ghost.parentNode.removeChild(ghost)
+		}
+	}, 10)
+}
+
 function shoot(){
 	s = document.createElement("a-sphere"); 
 	s.setAttribute("radius", .01);