removed shape:box; from physx-body-from-models component for the gltf…

… models
Tezeroth · Jan 3, 2025 · a7f44cb · a7f44cb
1 parent d168dd1
commit a7f44cb
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 77 deletions.
diff --git a/index.html b/index.html
@@ -28,79 +28,7 @@
  <!--<script src="raycaster-listen.js"></script>--> 
   <script src="ar-shadow-helper.js"></script><!--hers-->
   <script src="ar-cursor.js"></script><!--hers-->
-
-
-  <!--DEBUGGING DEBUGGING DEBUGGING DEBUGGING DEBUGGING DEBUGGING DEBUGGING DEBUGGING DEBUGGING DEBUGGING -->
-  <script>
-    AFRAME.registerComponent('debug-magnet', {
-      init: function () {
-        const object3D = this.el.object3D;
-        const boxHelper = new THREE.BoxHelper(object3D, 0xff0000); // Red color for the box
-        this.el.sceneEl.object3D.add(boxHelper);
-
-        console.log(`Debugging magnet range for ${this.el.id}`);
-      }
-    });
-
-    // Apply the debug-magnet component to your magnets
-    document.addEventListener('DOMContentLoaded', () => {
-      document.querySelector('#left-magnet').setAttribute('debug-magnet', '');
-      document.querySelector('#right-magnet').setAttribute('debug-magnet', '');
-    });
-  </script>
-
-<script>
-  AFRAME.registerComponent('show-magnet-range', {
-    schema: {
-      range: {type: 'vec2', default: {x: 0.2, y: 0.1}}, // Radial and vertical range
-    },
-    init: function () {
-      const rangeX = this.data.range.x; // Radial range
-      const rangeY = this.data.range.y; // Vertical range
-
-      // Create a visual helper (wireframe sphere or cylinder)
-      const geometry = new THREE.CylinderGeometry(rangeX, rangeX, rangeY * 2, 32);
-      const material = new THREE.MeshBasicMaterial({
-        color: 0x00ff00, // Green color
-        wireframe: true,
-        transparent: true,
-        opacity: 0.5
-      });
-
-      const rangeHelper = new THREE.Mesh(geometry, material);
-
-      // Rotate cylinder to align vertically
-      rangeHelper.rotation.x = Math.PI / 2;
-
-      // Add the helper to the model
-      this.el.object3D.add(rangeHelper);
-    }
-  });
-
-  document.addEventListener('DOMContentLoaded', () => {
-    // Add the component to your grabbable objects
-    const grabbables = document.querySelectorAll('[class~="magnet-left"], [class~="magnet-right"]');
-    grabbables.forEach(el => {
-      el.setAttribute('show-magnet-range', 'range: 0.2 0.1'); // Set the desired range here
-    });
-
-    console.log('Magnet range visualization added.');
-  });
-</script>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+<!--<script src="show-magnet-range.js"></script>-->
 
 
   </head>
@@ -280,9 +208,9 @@
 src="#buddy"
 data-pick-up
 class="magnet-left magnet-right"
-data-magnet-range="0.5,0.5,360,180"
+data-magnet-range="0.5,0.5,360,90"
 position="-2 1.3 3"
-physx-body-from-model="type: dynamic; shape:box; mass:2;"
+physx-body-from-model="type: dynamic; mass:2;"
 scale="1 1 1"
 toggle-physics 
 >
@@ -295,8 +223,9 @@
 data-pick-up 
 class="magnet-left magnet-right"
 data-magnet-range="0.2,0.1,360,180"
+magnet-range-debug="range:0.2,0.1"
 position="-2.3 1.3 2.6"
-physx-body-from-model="type: dynamic; shape: box; mass:2;"
+physx-body-from-model="type: dynamic; mass:2;"
 toggle-physics>
 </a-gltf-model>
 
@@ -308,7 +237,7 @@
 class="magnet-left magnet-right"
 data-magnet-range="0.5,0.5,360,180"
 position="-1.5 1.3 3.3"
-physx-body-from-model="type: dynamic; shape: box; mass:2;"
+physx-body-from-model="type: dynamic; mass:2;"
 toggle-physics>
 </a-gltf-model>
 

diff --git a/show-magnet-range.js b/show-magnet-range.js
@@ -0,0 +1,52 @@
+<script>
+AFRAME.registerComponent('magnet-range-debug', {
+  schema: {
+    range: {type: 'vec2', default: {x: 0.2, y: 0.1}} // radial (X), vertical (Y)
+  },
+
+  init: function () {
+    // Create a separate <a-entity> for the debug guide
+    this.guideEl = document.createElement('a-entity');
+    this.el.sceneEl.appendChild(this.guideEl);
+
+    const rangeX = this.data.range.x; // Radial range
+    const rangeY = this.data.range.y; // Vertical range
+
+    // Use a cylinder wireframe to visualize the range
+    // radius = rangeX, height = rangeY*2
+    const geometryStr = `primitive: cylinder; radius: ${rangeX}; height: ${rangeY * 2}; segmentsRadial: 32;`;
+    const materialStr = `color: #00ff00; wireframe: true; transparent: true; opacity: 0.5;`;
+
+    // Set up the guide entity
+    this.guideEl.setAttribute('geometry', geometryStr);
+    this.guideEl.setAttribute('material', materialStr);
+    this.guideEl.setAttribute('rotation', '90 0 0');    // Rotate so cylinder is vertical
+    this.guideEl.setAttribute('physx-body', 'none');    // Ensure no physics on the guide
+    this.guideEl.classList.add('magnet-guide');
+  },
+
+  tick: function () {
+    // Each frame, copy the parent's world transform to the guide
+    const obj = this.el.object3D;
+    obj.updateMatrixWorld(true);
+
+    // Decompose the parent's matrixWorld
+    const pos = new THREE.Vector3();
+    const rot = new THREE.Quaternion();
+    const scale = new THREE.Vector3();
+    obj.matrixWorld.decompose(pos, rot, scale);
+
+    // Apply those transforms to the guide entity
+    this.guideEl.object3D.position.copy(pos);
+    this.guideEl.object3D.quaternion.copy(rot);
+    this.guideEl.object3D.scale.copy(scale);
+  },
+
+  remove: function () {
+    // Cleanup: remove the guide entity if this component is removed
+    if (this.guideEl && this.guideEl.parentNode) {
+      this.guideEl.parentNode.removeChild(this.guideEl);
+    }
+  }
+});
+</script>