subunit

Subunit

Selections in THREE.js

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.

Example Code

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);
...

Live Demos:

Getting started

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

To run the demos locally...

• clone the repo

• cd subunit

• npm install && npm start

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