inventory example

index.html

@@ -3074,6 +3074,51 @@ function shoot(){
 	}, 10)
 }
 
+var collectibles = []
+var inventory = []
+AFRAME.registerComponent('collectible', {
+  schema: {
+	  required: {type: 'string'}
+  },
+  init: function () {
+	collectibles.push({el:this.el, position:this.el.getAttribute("position"), required:this.data.required})
+  }
+}) 
+AFRAME.registerComponent('collect-to-inventory', {
+  schema: {
+	  threshold: {type: 'number', default: 1},
+  },
+  init: function () {
+	this.tick = AFRAME.utils.throttleTick(this.tick, 500, this);
+	// could also rely on https://aframe.io/docs/1.4.0/core/entity.html#listening-for-component-changes
+  },
+  tick: function(){
+	let pos = this.el.getAttribute("position")
+	// does not scale well yet probably not too costly. Should use octree for numerous ones
+	collectibles.map( (t,i) => {
+		if ( pos.distanceTo(t.position) < this.data.threshold ){
+			if (!t.required){
+				inventory.push(t.el.id)
+				t.el.parentNode.removeChild(t.el)
+				collectibles.splice(i,1)
+				setFeedbackHUD("collected "+t.el.id)
+			}
+			if (t.required && inventory.includes(t.required)) {
+				console.log(t.required, 'needed and found')
+				inventory.push(t.el.id)
+				t.el.parentNode.removeChild(t.el)
+				collectibles.splice(i,1)
+				setFeedbackHUD("collected "+t.el.id)
+			}
+			if (t.required && !inventory.includes(t.required)) {
+				setFeedbackHUD("missing "+t.required)
+			}
+			console.log(inventory)
+		}
+	})
+  }
+}) 
+
 // used for testing
 AFRAME.registerComponent('startfunctions', {
   init: function () {
@@ -3112,7 +3157,7 @@ AFRAME.registerComponent('startfunctions', {
       <a-entity id="rig" animation="property: position.y; to: 0.4; dir: alternate; loop:1; startEvents:jump; dur: 400">
 		<a-sound src="../content/street-crowd-ambience.mp3" autoplay=true loop=true volume=0.2></a-sound><!-- warning skipped on Quest, does autoplay there -->
 		<a-sound id="snapping-sound" src="url(../content/magnets_snap.mp3)"></a-sound>
-		<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;"
+		<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;" collect-to-inventory
 			hud camera look-controls wasd-controls waistattach="target: .movebypinch" position="0 1.6 0">
 			<a-entity position="0 -1.2 0" rotation="-25 0 0" collision-check raycaster="far:.2; interval: 100; objects: .cubes; showLine:true;" ></a-entity>
 			<a-box visible="false" id="playerwithbody"></a-box>
@@ -3144,6 +3189,9 @@ AFRAME.registerComponent('startfunctions', {
       <!-- visual reminders of shortcuts, a poster on the far left/right of keyboard shortcuts -->
       </a-box>
 
+      <a-box collectible id="secretkey" color="red" position="-2 1 0" scale=".1 .1 .1"></a-box>
+      <a-box collectible="required: secretkey" id="othersecretkey" color="blue" position="2 1 0" scale=".1 .1 .1"></a-box>
+
       <!-- ground to clone with raycaster -->	
       <a-box class="cubes" color="red" position="0 0 -2"></a-box>
       <a-box class="cubes" color="red" position="1 0 -2"></a-box>