A small library that gives you D3 style selections in THREE.js. Now you can do awesome stuff in WebGL with a familiar API. Subunit selects into a THREE.js scene graph just like selecting into the DOM with D3.

npm install subunit

The library only has peer dependency on THREE.js. D3 is not required to be loaded on the page.

The code below is an excerpt from this simple demo that creates some blue and red bars.

...
const barMaterial = new THREE.MeshPhongMaterial({ color: '#4183c4' }); // blue material
const bigMaterial = new THREE.MeshPhongMaterial({ color: '#ff0000' }); // red material

const rootNode = Subunit.select(scene);     // select the scene
rootNode.node().position.x = -size[0] / 2;  // adjust the root node

rootNode.selectAll('bar')        // select with tags separated by periods e.g 'tag1.tag2.tag3'
  .data(data).enter()            // specify your data and call enter on the selection
  .append('mesh')                // append a mesh
  .attr('tags', 'bar')           // add a tag
  .tagged('big', function (d) {  // conditionally add a tag
    return d.frequency > 0.07;
  })
  .attr('material', barMaterial)
  .attr('geometry', function (d) {
    const w = x.bandwidth();
    const h = size[1] - y(d.frequency);
    return new THREE.BoxGeometry(w, h, 5);
  })
  .each(function (d) {
    const x0 = x(d.letter);
    const y0 = -y(d.frequency) / 2;
    this.position.set(x0, y0, 240);
  });

rootNode.selectAll('bar.big')      // use the tags like classes to select items
  .attr('material', bigMaterial);
...

There is starter repo for loading Subunit in browser with THREE.js.

1. clone the repo

2. cd subunit

3. npm install && npm start

That will fire up a dev server and open your browser to the demos index.