playing with raycaster, trying to find height of ground

At current lat long (in index.html), we're colliding with things, but we're not yet sure which thing is the ground. Hypothesis: a mesh that contains a lot of points (faces) in its geometry (object.geometry.index.count) is likely to be the ground; others are likely to be sky or excessively coarse-grained meshes.
3DStreet · Jul 5, 2024 · 9ac0cb6 · 9ac0cb6
1 parent ea42f8c
commit 9ac0cb6
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 4 deletions.
diff --git a/examples/google-tiles-raycaster/index.html b/examples/google-tiles-raycaster/index.html
@@ -8,6 +8,7 @@
   </meta>
   <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
   <script src="../../dist/aframe-loader-3dtiles-component.js"></script>
+  <script src="tiles-raycaster-simple.js"></script>
 
   <style>
     #data-attribution {
@@ -57,17 +58,19 @@
 
   <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="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-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>
 
     <a-entity id="reference-layers">
       <a-entity id="tileset" data-no-pause loader-3dtiles="
           url: https://tile.googleapis.com/v1/3dtiles/root.json; 
-          lat: 37.77522354250163;
-          long: -122.41931773049723;
-          height: -16.5;
+          lat: 48.4069835;
+          long: -114.3008482;
+          height: 1000.0;
+          geoTransform: WGS84Cartesian;
           googleApiKey: AIzaSyAQshwLVKTpwTfPJxFEkEzOdP_cgmixTCQ;
           maximumSSE: 48;
           maximumMem: 400;

diff --git a/examples/google-tiles-raycaster/tiles-raycaster-simple.js b/examples/google-tiles-raycaster/tiles-raycaster-simple.js
@@ -0,0 +1,108 @@
+/* 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.
+ */
+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
+  },
+  init: function () {
+    this.intersections = [];
+    this.objects = [];
+    this.prevCheckTime = undefined;
+    this.rawIntersections = [];
+    this.raycaster = new THREE.Raycaster();
+    const data = this.data;
+
+    this.raycaster.set(data.origin, data.direction);
+  },
+
+  /**
+     * 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;
+      }
+      d.traverse(e => {
+        if (e.isMesh) {
+          allMeshs.push(e);
+        }
+      });
+    });
+    console.log('allMeshs', allMeshs);
+    // const intersects = this.raycaster.intersectObjects(allMeshs)
+    // if (!intersects.length) {
+    //   return null
+    // }
+    // return intersects[0].point
+
+    // this.objects = this.flattenObject3DMaps(els);
+    this.objects = allMeshs;
+    console.log(this.objects);
+  },
+
+  /**
+     * Check for intersections and cleared intersections on an interval.
+     */
+  tock: function (time) {
+    const data = this.data;
+    const prevCheckTime = this.prevCheckTime;
+
+    // Only check for intersection if interval time has passed.
+    if (prevCheckTime && (time - prevCheckTime < data.interval)) { return; }
+
+    // Update check time.
+    this.prevCheckTime = time;
+    this.checkIntersections();
+  },
+
+  /**
+     * Raycast for intersections and emit events for current and cleared 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);
+  }
+});
+
+/**
+ * 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];
+  }
+}