Skip to content
Fabrication tool for three.js
JavaScript Shell
Latest commit c57172e Sep 11, 2012 @blackjk3 Added capital T in three.
Failed to load latest commit information.
css Added ability to edit morph animations from animation panel Sep 11, 2012
js Fixed #17 Added lock functionallity. Sep 11, 2012
test Added logo Jan 6, 2012
.htaccess Initial commit of files. Dec 11, 2011
404.html Initial commit of files. Dec 12, 2011
LICENSE Added initial menu system Jan 19, 2012
apple-touch-icon-114x114-precomposed.png Initial commit of files. Dec 12, 2011
apple-touch-icon-72x72-precomposed.png Initial commit of files. Dec 12, 2011
apple-touch-icon.png Initial commit of files. Dec 12, 2011
humans.txt Initial commit of files. Dec 12, 2011


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.