A Three.js plugin for rendering Kinectron feeds
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Kinectron for Three.js

A plugin for working with Kinectron streams in Three.js

  1. Usage
  2. Contribute Kinectron


You can create geomtery from the Kinect's depth feed by simply:

var kinectGeo = THREE.KinectronGeometry("mesh");

You can choose the rendering type by changing the first argument to "mesh" / "wire" / "points"

And then simply add it your Three.js scene:


You would need to also bind the incoming Kinect image to the '''kinectGeo''' instance

function onNewKinectFrame(ktronImg) {

For further reference use the simple example

Class methods:

  • kinectGeo.setDisplacement(amount) - Increase or decrease the amount of displacement on the Z axis (Default value is 1.0).
  • kinectGeo.setBrightness(amount) - Increase or decrease the brightness of the texture (Default value is 0.0).
  • kinectGeo.setContrast(amount) - Increase or decrease the contrast of the texture (Default value is 1.0).
  • kinectGeo.setOpacity(opacity) - Increase or decrease the opacity of the texture (Default value is 1.0).
  • kinectGeo.setPointSize(opacity) - Increase or decrease the point size (Only when rendering points, "points").
  • kinectGeo.setLineWidth(width) - Increase or decrease the line width (Only when rendering wireframe, "wire").
  • kinectGeo.pause() - Pause the rendering of the Kinectron stream, keeps the last frame.
  • kinectGeo.play() - Resume the rendering of the Kinectron stream.
  • kinectGeo.bind(imageStream) - Bind a Kinectron image stream to the material, needs to be called everytime a new frame arrives.
  • kinectGeo.update() - Calling the update method in the render loop will update the time uniform in the shader.


Fork/Clone the repository, make sure to use the --recursive flag when you clone to clone submodules too, and npm install all dependencies

Build system commands:

  • npm run start uses concurrently to run both an http-server and a watchify build opreation on every save to dist/kinectron.three.js.
  • npm run build builds a minified version of the plugin once and saves it to dist/kinectron.three.min.js

Written by juniorxsound based on DepthKit.js as a part XStory grant in ITP, NYU