Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fabrication tool for three.js
branch: master
Failed to load latest commit information.
build Added support for colors for materials!
css Added ability to edit morph animations from animation panel
img Adding tree assets
js Fixed #17 Added lock functionallity.
json Initial commit of files.
less Added ability to edit morph animations from animation panel
.gitignore Adding tree assets
.htaccess Initial commit of files.
.project Initial commit of files.
404.html Initial commit of files.
LICENSE Added license information Added initial menu system
apple-touch-icon-114x114-precomposed.png Initial commit of files.
apple-touch-icon-72x72-precomposed.png Initial commit of files.
favicon.ico Initial commit of files.
humans.txt Initial commit of files.
index.html Added capital T in three.
robots.txt Initial commit of files.


ThreeFab is a tool that allows designers and developers to quickly fabricate and manipulate a three.js scene. This is currently an alpha build as a proof of concept. You will need a WebGL capable browser.

For those not familiar with Three.js



Keyboard controls

  • S - Zoom in and out on scene (Zoom also works with mouse wheel)
  • D - Pan around scene
  • X - Delete selected object
  • SPACE - Start stop animation preview


To move the camera click and drag anywhere in the viewport.

Targeting objects

Double click a mesh object to target. The viewport controls will then rotate according to the registration point of the targeted object. Clicking the "center" button in the "Controls" panel will re-target the viewport controls to the center of the scene.

Positioning objects

To position an object you can use the manipulator tool or use the individual position attributes in the transforms panel.


The transforms are setup in blocks of three coordinates (x,y,z). The first block is for position, second is for rotation, third is for scale. Note: Rotation is currently in radians.


The outliner contains all the children that can be manuipulated in the scene. To change the selected object you can either click on that object in the viewport or use the drop down provided in the outliner.


To add a texture first select a model and drag and drop the image on to the viewport.


To generate and export the current three.js code click the generate button in the top right. Note: You will need to update the paths for any textured materials and JSON models. Threefab will put a placeholer url that will need to be modified.


To preview an animation the model must have morph targets set up. The animation timeline will then allow you to play, pause, and scrub through the keyframes. To test use the animated models that come with three.js. (Ex. horse.js, parrot.js, flamingo.js, stork.js)


Screenshot Screenshot 2

Something went wrong with that request. Please try again.