loginsign up
loginsign up

Documentation

Table of Contents

Getting Started

The Three-tools UI is full of information but might be a bit overwhelming! Relevant information is separated into different panels for your convenience. Recommended starting points for learning how Three-tools can improve your productivity are listed below!

(NOTE: Within each panel, numbers and values can be typed or dragged to change)

Scenes & Cameras Panel

View and change scene and camera properties

Click the dropdown menu of scenes and cameras to view different entity maps. Scenes and 3D objects are currently editable but camera properties are not able to be altered.

Credits to three.js Project Sample. Click for more info.

  • Select entities from the tree to view a smaller panel to the right with their properties
  • Use the search bar to search for entities by Name, Type or UUID (Note: UUID is not persistent and may change on reload)
  • Use the refresh button to reload the panel
  • Use the visibility icons to toggle entities on and off
  • For Scenes and 3D Objects / Entities:
  • Developers can view the Type, UUID, and Name properties
  • Developers can see the Transform and Rendering information and adjust those properties
  • Within the Transform tab:
  • Adjust the position, rotation and scale
  • Use the Matrix Auto Update toggle to adjust whether or not changes are immediately reflected in the DOM
  • Click "Save" button to save specific properties if you would like to go back to them
  • Click "Display Saved Data" to open a popup caching these saved specs and log them to your console. Please see below for a visual summary
  • Within the Rendering tab:
  • Adjust the Render Order
  • The visibility toggle here works the same way as the visibility icon
  • Adjust shadow properties
  • FOR ONLY SCENES:
  • A Background tab will be available to adjust the Background color if it has been set (currently no support for Background textures or the default null background)
  • For Cameras:
  • View the Type, UUID, Name and type specific properties
  • These properties are not currently adjustable

Geometries Panel

View and change geometry properties.

Lists the Geometries / BufferGeometries rendered to the scene(s) available

  • Use the search bar to search for entities by Name or UUID (Note: UUID is not persistent and may change on reload)
  • Use the refresh button to reload the panel
  • Use the visibility icons to toggle the entities on and off
  • Select geometries from the list to see a list of their properties rendered on the right
  • Type, UUID and Name
  • Index
  • Groups
  • If Groups is an array, it will be hyperlinked to open more information in a new tab
  • Morph Targets Relative

Materials Panel

View and change materials properties

Lists the Materials rendered to the scene(s) available

Credits to three.js Project Sample. Click for more info.

  • Use the search bar to search for entities by Name or UUID (Note: UUID is not persistent and may change on reload)
  • Use the refresh button to reload the panel
  • Use the visibility icons to toggle the entities on and off
  • Select Materials from the list to see a list of their properties
  • Type, UUID and Name
  • Color: adjustable by color map
  • Materials Type Specific Properties
  • If null, not editable
  • Otherwise, can be adjusted
  • Other nested tabs for more type specific properties

Textures Panel

View and change textures properties

Lists the Textures rendered to the scene(s) available

Credits to three.js Project Sample. Click for more info.

  • Use the search bar to search for entities by Name or UUID (Note: UUID is not persistent and may change on reload)
  • Use the refresh button to reload the panel
  • Use the visibility icons to toggle the entities on and off
  • Select Textures from the list to see a list of their properties
  • Changes to these properties are not fully supported
  • Tabs:
  • Filters
  • Min Filter -- dropdown menu of options
  • Mag Filter -- dropdown menu of options
  • Wrapping
  • Wrap S -- dropdown menu of options
  • Wrap T -- dropdown menu of options
  • Transform
  • Offset
  • Repeat
  • Rotation
  • Center
  • matrixAutoUpdate
  • Matrix

Renderer Panel

View rendering info from the scenes available.

Note: this information is not always correct due to the renderer.info not being properly reset. If the information looks incorrect, please see the three.js renderer.info documentation for further information about manually resetting your renderer.info

Credits to three.js Project Sample. Click for more info.

  • Left panel:
  • Renderer tab tracks different data with a setInterval function to update every second. This tab lists the information from WebGLRenderer.info.render
  • frames
  • draw calls
  • triangles
  • points
  • lines
  • Memory tab tracks data from WebGLRenderer.info.memory
  • geometries
  • textures
  • programs
  • Right panel: WebGLRenderer
  • Lists the type of renderer used, name and properties
  • (gammaFactor has been removed from THREE.WebGLRenderer so we removed that property)
  • Tone Mapping
  • Shadow Map
  • Buffer Clearing
  • Capabilities
  • Clipping
  • Scene
  • Morph Limits

Popup Cache

Cache entity data and display it in a popup window

Lists the position, rotation, and scale data of selected entities

Credits to three.js Project Sample. Click for more info.

See something missing from our documentation?

Contact us with the changes!