successful raycast to 3d tiles ground WIP

3DStreet · Jul 6, 2024 · bb515e3 · bb515e3
1 parent 9ac0cb6
commit bb515e3
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 66 deletions.
diff --git a/examples/google-tiles-raycaster/index.html b/examples/google-tiles-raycaster/index.html
@@ -59,7 +59,7 @@
   <a-scene renderer="colorManagement: true; physicallyCorrectLights: true; anisotropy: 16;" reflection>
 
     <!-- <a-entity id="raycaster" raycaster="showLine: true" collider-check rotation="-90 0 0" position="0 10 0"></a-entity> -->
-    <a-entity id="tiles-raycaster" tiles-raycaster-simple="interval: 1000;"></a-entity>
+    <a-entity id="tiles-raycaster" tiles-raycaster-simple></a-entity>
     <a-box position="0 0 0" color="red" width="0.1" height="0.1" depth="0.1"></a-box>
 
     <a-camera id="camera" position="0 1.6 2"></a-camera>

diff --git a/examples/google-tiles-raycaster/tiles-raycaster-simple.js b/examples/google-tiles-raycaster/tiles-raycaster-simple.js
@@ -1,72 +1,58 @@
 /* global AFRAME */
 
-const registerComponent = AFRAME.registerComponent;
-const THREE = AFRAME.THREE;
-const utils = AFRAME.utils;
-
 /**
- * Raycaster component.
- *
- * Pass options to three.js Raycaster including which objects to test.
- * Poll for intersections.
- * Emit event on origin entity and on target entity on intersect.
- *
- * @member {array} objects - Cached list of meshes to intersect.
- * @member {number} prevCheckTime - Previous time intersection was checked. To help interval.
- * @member {object} raycaster - three.js Raycaster.
+ * 3d tiles Raycaster component based on A-Frame Raycaster component
  */
 AFRAME.registerComponent('tiles-raycaster-simple', {
   schema: {
     direction: { type: 'vec3', default: { x: 0, y: -1, z: 0 } }, // down
-    interval: { default: 0 },
-    objects: { default: '' },
-    origin: { type: 'vec3', default: { x: 0, y: 0, z: 0 } } // raycast from here
+    interval: { default: 1000 },
+    origin: { type: 'vec3', default: { x: 0, y: 0, z: 0 } }, // raycast from here
+    tilesetSelector: { default: '#tileset', type: 'selector' }
   },
   init: function () {
     this.intersections = [];
-    this.objects = [];
-    this.prevCheckTime = undefined;
+    this.objects = []; // Cached list of meshes to intersect.
+    this.prevCheckTime = undefined; // Previous time intersection was checked. To help interval.
     this.rawIntersections = [];
-    this.raycaster = new THREE.Raycaster();
-    const data = this.data;
-
-    this.raycaster.set(data.origin, data.direction);
+    // init three.js raycaster and set origin and direction
+    this.raycaster = new AFRAME.THREE.Raycaster();
+    this.raycaster.set(this.data.origin, this.data.direction);
   },
 
   /**
-     * Update list of objects to test for intersection.
-     */
+         * Update list of objects to test for intersection
+         */
   refreshObjects: function () {
-    // get object3d of 3dtiles entity
-    const tilesetChildren = document.querySelector('#tileset').object3D?.children;
-    const allMeshs = [];
-    console.log(tilesetChildren);
-
-    tilesetChildren?.forEach(d => {
-      if (!d.visible) {
-        return;
+    function getVisibleMeshes (object) {
+      const visibleMeshes = [];
+      if (!object.visible) {
+        return visibleMeshes;
+      }
+      if (object.isMesh) {
+        visibleMeshes.push(object);
       }
-      d.traverse(e => {
-        if (e.isMesh) {
-          allMeshs.push(e);
-        }
+      object.children.forEach(child => {
+        visibleMeshes.push(...getVisibleMeshes(child));
       });
+      return visibleMeshes;
+    }
+
+    // get children of object3d of 3dtiles entity
+    const tilesetChildren = this.data.tilesetSelector.object3D?.children;
+    const visibleMeshes = [];
+
+    tilesetChildren?.forEach(object => {
+      visibleMeshes.push(...getVisibleMeshes(object));
     });
-    console.log('allMeshs', allMeshs);
-    // const intersects = this.raycaster.intersectObjects(allMeshs)
-    // if (!intersects.length) {
-    //   return null
-    // }
-    // return intersects[0].point
+    console.log('visibleTileMeshes', visibleMeshes.length, 'totalTileMeshes', tilesetChildren[0]?.children.length);
 
-    // this.objects = this.flattenObject3DMaps(els);
-    this.objects = allMeshs;
-    console.log(this.objects);
+    this.objects = visibleMeshes;
   },
 
   /**
-     * Check for intersections and cleared intersections on an interval.
-     */
+         * Check for intersections on an interval.
+         */
   tock: function (time) {
     const data = this.data;
     const prevCheckTime = this.prevCheckTime;
@@ -76,33 +62,20 @@ AFRAME.registerComponent('tiles-raycaster-simple', {
 
     // Update check time.
     this.prevCheckTime = time;
+    this.refreshObjects();
     this.checkIntersections();
   },
 
   /**
-     * Raycast for intersections and emit events for current and cleared intersections.
-     */
+         * Raycast for intersections
+         */
   checkIntersections: function () {
-    const el = this.el;
-    const data = this.data;
-    let i;
     const intersections = this.intersections;
 
     // Raycast.
     intersections.length = 0;
-    console.log('this.objects', this.objects.length);
     this.raycaster.intersectObjects(this.objects, true, intersections);
-    console.log('intersections', intersections);
+    console.log('intersections', intersections.length);
+    console.log('intersection[0].distance', intersections[0]?.distance);
   }
 });
-
-/**
- * Copy contents of one array to another without allocating new array.
- */
-function copyArray (a, b) {
-  let i;
-  a.length = b.length;
-  for (i = 0; i < b.length; i++) {
-    a[i] = b[i];
-  }
-}