Skip to content
This repository

Fabrication tool for three.js

branch: master
README.md

ThreeFab

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

TRY IT OUT

Controls

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

Viewport

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.

Transforms

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.

Outliner

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.

Textures

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

Exporter

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.

Animation

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)

Screenshots

ScreenshotScreenshot 2

Something went wrong with that request. Please try again.