A Control Framework for three.js
The idea of this project is to provide a system
for writing controls in
three.js so that:
- Each control does one specific thing, such as rotate, move, or scale an object or rotate or move the camera.
- Provide a class hierarchy to take care of most of the housekeeping of writing a control, so that, when you write one, you can just focus on the functionality.
- Provide a control manager that can assign one or more controls to handle mouse or touch events with different buttons pressed or gestures.
If a mouse or touchpad is used, the handler triggered can also depend on which shift keys are pressed.
Example: Duality of Platonic Solids
examples there is a simple application that illustrates
duality among platonic solids and demonstrates the variety of things
that can be done with the control framework. You can see it in action
on doguleez.com or you can build it and serve it
yourself as described below.
The initial page of the describes the different things you can do with the controls in it.
Building the Control Framework
Note that this repository contains pre-built versions of the control framework library and the duality example, so you don't have to build unless you make changes to the code. Further, the whole thing is written with ES6 modules, so with minor tinkering you can just use those directly and never build.
node.js, if necessary. Then:
$ git clone <control framework url> $ cd control-framework $ npm install
Now do the following:
$ npm run lib $ npm run duality
Or you can do:
$ npm run build-uglify $ npm run build-uglify-duality
which also compress the concatenated code and prepend the license. But compressing is not really necessary because the code is quite small.
Serving the Duality Example
From the project root directory or from a directory
containing it, you can serve the planetarium though your favorite HTTP
server. You will need to use an HTTP server rather than simply
heliocentric-mobile.html from file,
because browsers do not permit some WebGL operations for a page read
http-server, which you can install using
$ npm install http-server $ http-server -c-1
-c-1" is to prevent browser caching (because you are doing
development and always want the browser to use your latest code).
Now you should be able to access the duality example at
This page gives instructions on how to use the controls.