three.js / live


Getting Started

Activate the "Code" button in the header to view the html file and edit. Select example files from the sidebar to get started with interactive demos.



About

three.js / live is an open-source, in progress experiment. Also, check out the sibling project with D3js to up your data visualization game: d3js.live.

This tool is built using React and Redux. The code block is created with react-codemirror, built on top of the awesome CodeMirror project. Other dependencies (and big props!) include:


Motivation

Three.js is a great library for higher-level entry to WebGL. I've been working with the tool for a few years now and have found that the best educational resource is the set of example files created by mrdoob and other dedicated members of the community. This site builds off of the existing examples, and looks to extend the functionality to the web so that users can modify example files without having to clone the repo and run them locally.

On a personal note, live user-interaction is a huge interest of mine. Professionally, I often work with geometry libraries like three.js and d3.js to visualize data or simulate product designs. Much of this work extends to designers of varying techinical abilities, and interaction is a major part of the design/development process. I recently learned React/Redux thanks to the awesome instruction at Full Stack Academy. These technologies are really powerful for designing interactive tools and threejs.live is my first test case.

Finally, the bulk of my work at Mode Lab is product-design focused consulting, so non-disclosure agreements are part of the nature of the beast. I'm aiming to share more work, more readily, and more accessibly in order to stay in touch with the design and programming community. This first build-out is a loose template for future work releases.

Feel free to send a line with questions, comments, or feedback. Contact info is here: ekatzenstein