RBush-Ext Demo

The idea is that it'll always list (in real-time) all visible numbered cubes on the left and all the visible color-coded grouping IDs to the right. You can select a new height in the rtree via the drop-down menu to act as the grouping height, which will yeild different sized groupings.

HTML

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/sikanrong/three-map-controls/f4931940ac903562dc19086741906eb6e6185cdd/lib/three-map-controls.js"></script>
<script src="https://cdn.rawgit.com/sikanrong/rbush/master/dist/rbush.min.js"></script>
<!--This demo is a lot easier to understand with a a larger display area. The idea is that it'll always list (in real-time) all visible numbered cubes on the left and all the visible color-coded grouping IDs to the right. You can select a new height in the rtree via the drop-down menu to act as the grouping height, which will yeild different sized groupings.-->

CSS

body{
  margin: 0px;
  width: 100%;
  height: 100%;
}

ul{
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
}

canvas{
  position: absolute;
}

canvas:last-of-type{
  pointer-events: none;
}

.hud{
  color: white;
}

.hud .leaf-nodes,
.hud .parent-nodes,
.hud .height-controls {
  position: absolute;
  list-style: none;
  padding: 10px;
}

.hud .leaf-nodes::before{
  content: "Displayed Leaf-Nodes:"
}

.hud .leaf-nodes{
  pointer-events: none;
}

.hud .parent-nodes::before{
  content: "Displayed Grouping-Nodes:"
}

.hud .parent-nodes {
  top: 0px;
  right: 0px;
  pointer-events: none;
}

.hud .height-controls{
  width: 100%;
  height: 0px;
  position: absolute;
  text-align: center;
  overflow: visible;
}

.hud .height-controls select{
  display: inline-block;
}

JavaScript

(function(container){
        var camera, scene, renderer,
            spriteRenderer, spriteScene, rbush,
            rbushData;
        var meshes = [];
        var dims = 10;
        var displayedLeafLis = {},
            displayedParentNodeLis = {};
        var hudEl, leavesList, parentNodesList;
        var activeObjects = [],
            activeNodes = [];
        var bboxLines = {};
        var nodeColors = {};
        var selectedHeight = 1;
        init();
        animate();
        function displaySelectedBoxes(){
            _.each(bboxLines, function(o3d, height){
                o3d.visible = (height == selectedHeight);
            });
        };
        function updateData(){
            var center = camera.position.clone();
            activeObjects = [];
            activeNodes = [];
            center.z = 0;
            var vOffset = Math.tan((camera.fov * Math.PI / 180) / 2) * camera.position.z;
            var hOffset = vOffset * camera.aspect;
            var bottomLeft = new THREE.Vector3(center.x - hOffset, center.y - vOffset, 0 );
            var topRight = new THREE.Vector3(center.x + hOffset, center.y + vOffset, 0 );
            var _res = rbush.search({minX: bottomLeft.x, minY: bottomLeft.y, maxX: topRight.x, maxY: topRight.y});
            activeObjects = _res.leafNodes;
            var grouping_nodes = _res.parentNodes[selectedHeight];
            activeNodes = _.map(grouping_nodes, function (_gn) {
                return _gn.id;
            });
        }
        function updateList(_activeIds, _elCollection, _parentEl){
            _.each(_activeIds, function(_activeId){
                var _el;
                if(_elCollection[_activeId] === undefined){
                    _el = document.createElement('LI');
                    if(nodeColors[_activeId] !== undefined){
                        _el.style.color = "#"+nodeColors[_activeId].toString(16);
                    }
                    _elCollection[_activeId] = _el;
             ...