map clipping

index.html

@@ -102,6 +102,7 @@
     <a-entity id="reference-layers" data-layer-name="Geospatial Layers" data-layer-show-children></a-entity>
 
     <a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;"></a-entity>
+    <a-box id="clip-box" position="0 1.5 -2" scale="20 20 20" visible="false"></a-box>
 
     <a-entity id="cameraRig" class="ph-no-capture" data-layer-name="Viewer"
       cursor-teleport="cameraRig: #cameraRig; cameraHead: #camera;"

src/components/clipping-box.js

@@ -0,0 +1,77 @@
+/* global AFRAME */
+
+// use a box in the scene to clip a mapping layer to clear space for user content
+AFRAME.registerComponent('clipping-box', {
+  schema: {
+    sourceBoxSelector: { type: 'string' }
+  },
+
+  init: function () {
+    this.clipPlanes = [];
+    this.tempBox = new THREE.Box3();
+    this.targetCenter = new THREE.Vector3();
+    this.targetSize = new THREE.Vector3();
+    this.sourceEl = document.querySelector(this.data.sourceBoxSelector);
+    // Enable local clipping in the renderer
+    this.el.sceneEl.renderer.localClippingEnabled = true;
+
+    // Create planes
+    for (let i = 0; i < 6; i++) {
+      this.clipPlanes.push(new THREE.Plane());
+    }
+  },
+
+  tick: function () {
+    if (this.sourceEl && this.sourceEl.object3D) {
+      this.updateClipPlanes();
+    }
+    this.applyClippingPlanes();
+  },
+
+  updateClipPlanes: function () {
+    // Update bounding box
+    this.tempBox.setFromObject(this.sourceEl.object3D);
+    this.tempBox.getCenter(this.targetCenter);
+    this.tempBox.getSize(this.targetSize);
+
+    // Update plane positions
+    const normals = [
+      new THREE.Vector3(1, 0, 0),
+      new THREE.Vector3(-1, 0, 0),
+      new THREE.Vector3(0, 1, 0),
+      new THREE.Vector3(0, -1, 0),
+      new THREE.Vector3(0, 0, 1),
+      new THREE.Vector3(0, 0, -1)
+    ];
+
+    for (let i = 0; i < 6; i++) {
+      const normal = normals[i];
+      const point = this.targetCenter
+        .clone()
+        .add(
+          normal
+            .clone()
+            .multiply(
+              this.targetSize.clone().multiply(new THREE.Vector3(0.5, 0.5, 0.5))
+            )
+        );
+      this.clipPlanes[i].setFromNormalAndCoplanarPoint(normal, point);
+    }
+  },
+
+  applyClippingPlanes: function () {
+    this.el.object3D.traverse((obj) => {
+      if (obj.type === 'Mesh') {
+        if (Array.isArray(obj.material)) {
+          obj.material.forEach((material) => {
+            material.clippingPlanes = this.clipPlanes;
+            material.clipIntersection = true;
+          });
+        } else {
+          obj.material.clippingPlanes = this.clipPlanes;
+          obj.material.clipIntersection = true;
+        }
+      }
+    });
+  }
+});

src/components/street-geo.js

@@ -7,17 +7,19 @@ const MAPBOX_ACCESS_TOKEN_VALUE =
 
 AFRAME.registerComponent('street-geo', {
   schema: {
+    maps: {
+      type: 'string',
+      default: 'google3d',
+      oneOf: ['google3d', 'mapbox2d', 'osm3d']
+    },
     longitude: { type: 'number', default: 0 },
     latitude: { type: 'number', default: 0 },
     elevation: { type: 'number', default: null }, // deprecated
     orthometricHeight: { type: 'number', default: null },
     geoidHeight: { type: 'number', default: null },
     ellipsoidalHeight: { type: 'number', default: null },
-    maps: {
-      type: 'string',
-      default: 'google3d',
-      oneOf: ['google3d', 'mapbox2d', 'osm3d']
-    }
+    clippingEnabled: { type: 'boolean', default: true },
+    clippingSource: { type: 'string', default: '#clip-box' }
   },
   init: function () {
     /*
@@ -140,6 +142,14 @@ AFRAME.registerComponent('street-geo', {
         );
       }
       google3dElement.setAttribute('data-ignore-raycaster', '');
+
+      if (data.clippingEnabled) {
+        google3dElement.setAttribute(
+          'clipping-box',
+          'sourceBoxSelector: ' + data.clippingSource
+        );
+      }
+
       el.appendChild(google3dElement);
       self['google3d'] = google3dElement;
     };

src/index.js

@@ -19,6 +19,7 @@ require('./components/streetplan-loader');
 require('./components/street-geo.js');
 require('./components/street-environment.js');
 require('./components/intersection.js');
+require('./components/clipping-box.js');
 
 if (typeof VERSION !== 'undefined') {
   console.log(`3DStreet Version: ${VERSION}`);