add scene labels

index.html

@@ -19,6 +19,7 @@
     <!-- orbit controls -->
     <!-- <script src="./src/lib/aframe-orbit-controls.min.js"></script> -->
     <script src="./src/lib/orbit-camera.js"></script>
+    <script src="./src/lib/screen-position.js"></script>
 
 
     <title>3DStreet</title>
@@ -75,10 +76,8 @@
           </a-entity>
         </a-entity>
       </a-entity>
-
-      <a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;"></a-entity>
 
-      <!-- <a-entity position="-60 56 -16" light="intensity: 2.2; castShadow: true; shadowCameraBottom: -20; shadowCameraLeft: -30; shadowCameraRight: 40; shadowCameraTop: 30; shadowMapHeight: 1024; shadowMapWidth: 1024" visible=""></a-entity> -->
+      <a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;"></a-entity>
 
       <a-entity id="street-container" data-layer-name="3D Street Layers" data-layer-show-children>
         <a-entity id="default-street" street="length: 60; globalAnimated: true" streetmix-loader set-loader-from-hash></a-entity>

src/aframe-streetmix-parsers.js

@@ -1110,6 +1110,45 @@ function processSegments (segments, showStriping, length, globalAnimated, showVe
 
     // add new object
     segmentParentEl.append(createSegmentElement(scaleX, positionX, positionY, rotationY, groundMixinId, length, repeatCount, elevation));
+
+    // create label element and accompanying div for each segment (but not separator segments)
+    function createLabelElement (positionX, segmentType, segmentWidthInMeters, segmentWidthInFeet, length, i) {
+      if (segmentType != 'separator') {
+        let labelBox = document.createElement('a-box');
+        labelBox.setAttribute('position', `${positionX - segmentWidthInMeters / 2} 0 ${length / 2}`); // this places a small box on the left-most side of the segment
+        labelBox.setAttribute('height', 0.1);   
+        labelBox.setAttribute('width', 0.1); 
+        labelBox.setAttribute('depth', 0.1);   
+        labelBox.setAttribute('material', 'color: #AA00AA;');
+        labelBox.setAttribute('screen-position');
+        labelBox.setAttribute('output-screen-position-labels', `i: ${i};`);
+        labelBox.setAttribute('data-segmentType', segmentType);
+        labelBox.setAttribute('data-segmentWidthInMeters', segmentWidthInMeters.toFixed(1));
+        labelBox.setAttribute('data-segmentWidthInFeet', segmentWidthInFeet.toFixed(1));
+        streetParentEl.append(labelBox);
+        // create corresponding DOM element
+
+        let labelDiv = document.createElement('div');
+        labelDiv.setAttribute('class', 'overlay');
+        labelDiv.setAttribute('id', 'label-' + i);
+
+        let labelSpan = document.createElement('span');
+        labelSpan.setAttribute('class', 'measure-text');
+
+        labelDiv.append(labelSpan);
+
+        streetParentEl.append(labelDiv);
+
+        // <div class="overlay" id="label-0">
+        //   <span class="measure-text">Lorem ipsum 50ft</span>
+        // </div>
+
+      }
+    }
+
+    // add label object
+    segmentParentEl.append(createLabelElement(positionX, segmentType, segmentWidthInMeters, segmentWidthInFeet, length, i))
+
     // returns JSON output instead
     // append the new surfaceElement to the segmentParentEl
     streetParentEl.append(segmentParentEl);

src/lib/screen-position.js

@@ -0,0 +1,53 @@
+AFRAME.registerComponent('screen-position', {
+
+  init() {
+    this.vec3 = new THREE.Vector3()
+    this.getScreenPosition = this.getScreenPosition.bind(this)
+  },
+
+  getScreenPosition(pos) {
+
+    this.el.object3D.getWorldPosition(this.vec3)
+
+    const camera = this.el.sceneEl.camera
+    this.vec3.project(camera)
+
+    const bounds = document.body.getBoundingClientRect();
+
+    pos.x = bounds.width * (this.vec3.x + 1) / 2 
+    pos.y = bounds.height - bounds.height * (this.vec3.y + 1) / 2
+    return pos
+  }
+});
+// output-screen-position-2', `i: ${i};`);
+
+
+
+AFRAME.registerComponent('output-screen-position-labels', {
+
+  schema: {
+      i: { type: 'number'}
+  },
+  dependencies: ['screen-position'],
+  adjustOverlayDiv(order, leftPosition, text) {
+    var overlayDiv = document.querySelector('#label-' + order);
+    overlayDiv.style.left = leftPosition + "px";
+    overlayDiv.children[0].textContent = text;
+  },
+  init() {
+    this.pos = new THREE.Vector2()
+    this.getScreenPosition = this.el.components['screen-position'].getScreenPosition
+  },
+
+  tick() {
+
+    this.getScreenPosition(this.pos)
+    // adjustOverlayDiv(200, this.pos.x);  // This will set the width of the overlay div to 200px and its x-position to 100px from the left edge of its container.
+    // console.log(this.data.i, this.pos.x);
+    const labelText = this.el.getAttribute('data-segmentWidthInFeet') + 'ft\r\n' + this.el.getAttribute('data-segmentWidthInMeters') + 'm\r\n' + this.el.getAttribute('data-segmentType') 
+    this.adjustOverlayDiv(this.data.i, this.pos.x, labelText);  // This will set the x-position of the second overlay div to 250px from the left edge of its container.
+
+  }
+});
+
+

src/viewer-styles.css

@@ -137,3 +137,31 @@ body {
 	background: #6100FF;
 	z-index: 9999;
 }
+
+/**** Label CSS ****/
+
+.overlay {
+	overflow: hidden;
+	position: absolute; 
+	bottom: 50px; /* Adjust this value to your desired y position from the bottom */
+	display: inline-flex;
+	align-items: flex-end;
+	justify-content: flex-start; /* Align the content to the left */
+	z-index: 10;
+}
+
+.overlay::before {
+	content: "";
+	display: block;
+	height: 90px;
+	width: 1px; 
+	background-color: white;
+	margin-right: 10px; /* Adds some distance between the line and the text */
+}
+
+.measure-text {
+	display: inline-block;
+	white-space: nowrap; /* Prevents the text from wrapping to the next line */
+	color: white;
+	white-space: pre;
+}