target example

index.html

@@ -2980,7 +2980,7 @@ AFRAME.registerComponent('collider-check', {
 });
 
 // e.g usage within player entity :
-// <a-entity position="0 -1.6 0" rotation="-25 0 0" collision-check raycaster="far:.2; interval: 100; objects: .cubes; showLine:true;" ></a-entity>
+// <a-entity position="0 -1.2 0" rotation="-25 0 0" collision-check raycaster="far:.2; interval: 100; objects: .cubes; showLine:true;" ></a-entity>
 AFRAME.registerComponent('collision-check', {
   dependencies: ['raycaster'],
 
@@ -3009,6 +3009,23 @@ function jump(){
 	document.getElementById("rig").emit(`jump`, null, false)
 }
 
+AFRAME.registerComponent('collision-check-target', {
+  dependencies: ['raycaster'],
+
+  init: function () {
+    let score = 0
+    this.el.addEventListener('raycaster-intersection', function (e) {
+	radius = e.detail.els[0].getAttribute("radius")
+	score += 1/radius
+	setFeedbackHUD("hit" + radius + "target, score: "+score)
+	if (score > 20}{
+		score = 20
+		setFeedbackHUD("you win")
+	}
+    });
+  }
+});
+
 // used for testing
 AFRAME.registerComponent('startfunctions', {
   init: function () {
@@ -3050,11 +3067,20 @@ AFRAME.registerComponent('startfunctions', {
 		<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;" 
 			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-cone id="sword" 
+				collision-check-target raycaster="far:.6; interval: 100; objects: .target; showLine:true; direction:0 1 0"
+				color="gray" radius-bottom=".1" radius-top="0.01" position="0.5 -0.2 -1" height="1" rotation="-90 0 0"></a-cone>
 		</a-entity>
 		<a-entity id="rightHand" pinchprimary hand-tracking-controls="hand: right;"></a-entity>
 		<a-entity id="leftHand" pinchsecondary wristattachsecondary="target: #box" hand-tracking-controls="hand: left;"></a-entity>
       </a-entity>
 
+      <a-cylinder rotation="90 0 0" position="0 2 -3" class="target" color="white" height=".1" radius="1"></a-cylinder>
+      <a-cylinder rotation="90 0 0" position="0 2 -2.9" class="target" color="red" height=".1" radius=".7"></a-cylinder>
+      <a-cylinder rotation="90 0 0" position="0 2 -2.8" class="target" color="white" height=".1" radius=".4"></a-cylinder>
+      <a-cylinder rotation="90 0 0" position="0 2 -2.7" class="target" color="red" height=".1" radius=".1"></a-cylinder>
+
       <a-box pressable start-on-press id="box" scale="0.05 0.05 0.05" color="pink">
       <!-- could attach functions here... BUT then they have to be activable with the other hand! -->
       <!-- visual reminders of shortcuts, a poster on the far left/right of keyboard shortcuts -->