D3.JS / THREE.JS : A hybrid 3D scatter plot MkI

README.md

A very rough example of using THREE.JS math and TrackBallControls to make 3D scatter plot out of D3.JS. Doesn't have the renderer.domElement, everything is rendered as SVG. DragControls was heavily modified to stack with D3.JS.

TrackBallControls could be replaced by OrbitControls, as well as PerspectiveCamera by Orthographic one. Don't forget to replace renderer.domElement with document

controls = new THREE.OrbitControls( camera, document );

data.csv

DragControls4D3.js

/*
 * @author zz85 / https://github.com/zz85
 * @author mrdoob / http://mrdoob.com
 * Running this will allow you to drag three.js objects around the screen.
 
 * Modified for D3.JS / THREE.JS stack by
 * @author vkuchinov / https://github.com/vkuchinov
 *
 */

THREE.DragControls = function ( _object, _camera) {

    var _domElement = document;
    var rect = {
        
        bottom: window.innerHeight,
        height: window.innerHeight,
        left: 0,
        right: window.innerWidth,
        top: 0,
        width: window.innerWidth,
        x: 0,
        y: 0
        
    };

	var _plane = new THREE.Plane();
	var _raycaster = new THREE.Raycaster();

	var _mouse = new THREE.Vector2();
	var _offset = new THREE.Vector3();
	var _intersection = new THREE.Vector3();
    var _mouseDown = false;
    
	var scope = this;

	function activate() {

		_domElement.addEventListener( "mousedown", onDocumentMouseDown, false );
        	_domElement.addEventListener( "mousemove", onDocumentMouseMove, false );
		_domElement.addEventListener( "mouseup", onDocumentMouseUp, false );
		_domElement.addEventListener( "mouseleave", onDocumentMouseUp, false );

	}

	function deactivate() {

		_domElement.removeEventListener( "mousedown", onDocumentMouseDown, false );
        	_domElement.removeEventListener( "mousemove", onDocumentMouseMove, false );
		_domElement.removeEventListener( "mouseup", onDocumentMouseUp, false );
		_domElement.removeEventListener( "mouseleave", onDocumentMouseUp, false );

	}

	function dispose() { deactivate(); }

    function onDocumentMouseDown( event_ ) {

        _mouseDown = true;
        
		event_.preventDefault();

		_raycaster.setFromCamera( _mouse, _camera );
        
        if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
            
				_offset.copy( _intersection ).sub( _object.position );

        }

        document.getElementById("scatter3D").style.cursor = "move";
        scope.dispatchEvent( { type: "dragstart", object: _object } );

	}
    
	function onDocumentMouseMove( event_ ) {

        _plane.normal = new THREE.Vector3(_camera.position.x, _camera.position.y, _camera.position.z);
        _plane.normal.normalize();
        
		event_.preventDefault();

        if(_mouseDown){
            
            _mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
            _mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;

            _raycaster.setFromCamera( _mouse, _camera );

            if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {

                _object.position.copy( _intersection.sub( _offset ) );

            }

            scope.dispatchEvent( { type: "drag", object: _object } );

            return;
            
        }

	}

	function onDocumentMouseUp( event_ ) {

        _mouseDown = false;
        
		event_.preventDefault();
        	scope.dispatchEvent( { type: "dragend", object: _object } );
		document.getElementById("scatter3D").style.cursor = "auto";

	}

	// API

	this.enabled = false;

	this.activate = activate;
	this.deactivate = deactivate;
	this.dispose = dispose;

	// Backward compatibility

	this.setObjects = function () {

		console.error( "THREE.DragControls: setObjects() has been removed." );

	};

	this.on = function ( type, listener ) {

		console.warn( "THREE.DragControls: on() has been deprecated. Use addEventListener() instead." );
		scope.addEventListener( type, listener );

	};

	this.off = function ( type, listener ) {

		console.warn( "THREE.DragControls: off() has been deprecated. Use removeEventListener() instead." );
		scope.removeEventListener( type, listener );

	};

	this.notify = function ( type ) {

		console.error( "THREE.DragControls: notify() has been deprecated. Use dispatchEvent() instead." );
		scope.dispatchEvent( { type: type } );

	};

};

THREE.DragControls.prototype = Object.create( THREE.EventDispatcher.prototype );
THREE.DragControls.prototype.constructor = THREE.DragControls;

index.html

<!doctype html>
<html>
    
	<head>
        
		<title>D3.JS & THREE.JS Hybrid Scatter Plot 3D</title>
		<meta charset="utf-8">
        
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
        <script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
        <script src="TrackballControls.js"></script>
        <script src="DragControls4D3.js"></script>
        
		<link  href="styles.css" rel="stylesheet"/>
        
	</head>
    
    <body>

        <button style="right:0" id="switch" class="ui" onclick="switchUI()">Rotate</button>
        <svg id="scatter3D" width="0" height="0"></svg>

        <div id="tooltip">

            <div id="x_value" class="xl">{x}</div>  
            <div id="y_value" class="yl">{y}</div>
            <div id="z_value" class="zl">{z}</div> 

        </div>
             
        <script src="main.js"></script>

    </body>
    
</html>

main.js

var stats, scene, renderer, controls, dragControls;
var camera, cameraControl;
var pointCLoud, points = [], axes = [], labels = [];

var offset = new THREE.Vector3();
var drag = false;

var svg;
var colors = d3.scaleOrdinal(d3.schemeCategory10);
var radiusRatio = 2.5E-2;

var w =  window.innerWidth, h =  window.innerHeight;

d3.csv("data.csv", function(error_, data_) {

    if (error_) throw error_;

    data_.forEach(function(d_) {

    points.push({x: Number(d_.x), y: Number(d_.y), z: Number(d_.z), c: d_.colorid, r: d_.radius })

    });

    svg = d3.select("svg").attr("width", w).attr("height", h);

    init();

});

function init(){

    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    stats = new Stats();
    stats.domElement.style.position	= "absolute";
    stats.domElement.style.bottom	= "0px";
    document.body.appendChild( stats.domElement );

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set(256, 512, 512);
    camera.lookAt(0, 0, 0)
    scene.add(camera);

    var cloud =  new THREE.Geometry();
    
    points.forEach(function(d_) {

        var p = new THREE.Vector3(d_.x * 16 , d_.y * 16 , d_.z * 16);
        cloud.vertices.push( p );

    });

    var cloudmaterial =  new THREE.PointsMaterial( { color: 0xFFFFFF } );
    pointCloud = new THREE.Points( cloud , cloudmaterial );
    scene.add( pointCloud );

    controls = new THREE.TrackballControls( camera );
    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;
    controls.noZoom = false;
    controls.noPan = true;
    controls.staticMoving = true;
    controls.dynamicDampingFactor = 0.3;

    dragControls = new THREE.DragControls( pointCloud, camera );
    
    animate();
    
}

function animate() {

    var sv = new THREE.Vector3(0, 0, 0);

    var scale = 768.0 / sv.subVectors(new THREE.Vector3(0, 0, 0), camera.position).length();

    axes = [

        [new THREE.Vector3(0, 0, 0), new THREE.Vector3(196.0 / scale, 1E-5, 1E-5)],
        [new THREE.Vector3(0, 0, 0), new THREE.Vector3(1E-5, 196.0 / scale, 1E-5)],
        [new THREE.Vector3(0, 0, 0), new THREE.Vector3(1E-5, 1E-5, 196.0 / scale)]

    ];
    
    labels = [

        new THREE.Vector3(212.0 / scale, 1E-5, 1E-5),
        new THREE.Vector3(1E-5, 212.0 / scale, 1E-5),
        new THREE.Vector3(1E-5, 1E-5, 222.0 / scale)

    ];
    

    controls.update();

    renderSVG(pointCloud.position);

    requestAnimationFrame( animate );
    stats.update(); 
    renderer.render( scene, camera );

}

function toScreenXY (x_, y_, z_, camera_) {

    var p = new THREE.Vector3(x_, y_, z_);
    var vector = p.project(camera_);

    vector.x = (vector.x + 1) / 2 *  window.innerWidth;
    vector.y = -(vector.y - 1) / 2 *  window.innerHeight;

    return {x: vector.x, y: vector.y };

}

function renderSVG(p_){

var projectedPoints = svg.selectAll("circle").data(pointCloud.geometry.vertices);

projectedPoints.enter()
                .append("circle")
                .attr("class", "_3d")
                .attr("opacity", 1.0)
                .merge(projectedPoints)
                .attr("cx", function(d_){ return valueValidation(toScreenXY(d_.x + p_.x, d_.y + p_.y, d_.z + p_.z, camera).x); })
                .attr("cy", function(d_){ return valueValidation(toScreenXY(d_.x + p_.x, d_.y + p_.y, d_.z + p_.z, camera).y); })
                .attr("r",  function(d_, i_) { return points[i_].r * radiusRatio; })
                .attr("fill", function(d_, i_) { return colors(points[i_].c); })
                .attr("opacity", 0.5)
                .on("mouseover", function(d_){ 

                    if(!drag){
                        
                        d3.select(this).attr("stroke", "#DEDEDE")
                                       .attr("stroke-width", 6);

                        var t = d3.select("#tooltip")
                                .style("left", d3.select(this).attr("cx") + "px")
                                .style("top", d3.select(this).attr("cy") + "px");

                         document.getElementById("x_value").innerHTML = "x: " + (d_.x / 16.0).toFixed(2);
                         document.getElementById("y_value").innerHTML = "y: " + (d_.y / 16.0).toFixed(2);
                         document.getElementById("z_value").innerHTML = "z: " + (d_.z / 16.0).toFixed(2);
                        
                     }
    
                })
    
                .on("mouseout", function(d_){ 

                    if(!drag){
                        
                        d3.select(this).attr("stroke", "none")

                        var t = d3.select("#tooltip")
                                .style("left","-999px")
                                .style("top", "-999px");
                        
                    }
                    
                })

projectedPoints.exit().remove();

var projectedAxes = svg.selectAll("line").data(axes);

projectedAxes.enter()
            .append("line")
            .attr("class", "_3d")
            .merge(projectedAxes)
            .attr("x1", function(d_) { return valueValidation(toScreenXY(d_[0].x, d_[0].y, d_[0].z, camera).x); })
            .attr("y1", function(d_) { return valueValidation(toScreenXY(d_[0].x, d_[0].y, d_[0].z, camera).y); })
            .attr("x2", function(d_) { return valueValidation(toScreenXY(d_[1].x, d_[1].y, d_[1].z, camera).x); })
            .attr("y2", function(d_,){ return valueValidation(toScreenXY(d_[1].x, d_[1].y, d_[1].z, camera).y); })
            .attr("stroke", "#000000");

projectedAxes.exit().remove();
    
var projectedLabels = svg.selectAll("text").data(labels);

projectedLabels.enter()
            .append("text")
            .attr("class", "_3d")
            .merge(projectedLabels)
            .attr("dx", function (d_) { 

            var dx = valueValidation(toScreenXY(d_.x, d_.y, d_.z, camera).x); 

            return dx;
    
            })
            .attr("dy", function (d_) { 

            var dy = valueValidation(toScreenXY(d_.x, d_.y, d_.z, camera).y); 

            return dy;
    
            })
            .attr("font-family", "sans-serif")
            .text(function(d_, i_) { console.log(i_); var l = ["x", "y", "z"]; return l[i_]; });

projectedLabels.exit().remove();
    

}

function valueValidation(v_){ return v_ || 0; };

function switchUI(){

    var b = document.getElementById("switch");

    if(b.innerHTML == "Rotate") { 

        b.innerHTML = "Drag";
        controls.enabled = false;
        drag = true;
        dragControls.enabled = true;
        dragControls.activate();

    }
    else {

        b.innerHTML = "Rotate";
        controls.enabled = true;
        drag = false;
        dragControls.enabled = false;
        dragControls.deactivate();

    }

}

preview.jpg

styles.css

body {
    
  overflow: hidden;
  margin: 0;
    
}

svg { z-index: 1; }

.ui { position: absolute; z-index: 2; }

button{ margin: 20px; }

.xl { grid-area: xv; text-align: center;  }
.yl { grid-area: yv; text-align: center; }
.zl { grid-area: zv; text-align: center; }
 
#tooltip > div { 
    
    color: #FEFEFE; font-size: 12px; 
         -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none
        -ms-user-select: none;
            user-select: none;

}
    
#tooltip {
    
  position: absolute;
  text-align: center;
  width: 192px;
  font: 10px sans-serif;
  border: 0px;
  border-radius: 6px;
  opacity: 0.6;
  top: -9999px;
  left: -9999px;
    
  display: grid;
  grid-template-areas: "xv yv zv";
  grid-gap: 10px;
  background-color: #000000;
  padding: 10px;
  z-index: 99;
    
}

thumbnail.png

TrackballControls.js

/**
 * @author Eberhard Graether / http://egraether.com/
 * @author Mark Lundin 	/ http://mark-lundin.com
 * @author Simone Manini / http://daron1337.github.io
 * @author Luca Antiga 	/ http://lantiga.github.io
 */

THREE.TrackballControls = function ( object, domElement ) {

	var _this = this;
	var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };

	this.object = object;
	this.domElement = ( domElement !== undefined ) ? domElement : document;

	// API

	this.enabled = true;

	this.screen = { left: 0, top: 0, width: 0, height: 0 };

	this.rotateSpeed = 1.0;
	this.zoomSpeed = 1.2;
	this.panSpeed = 0.3;

	this.noRotate = false;
	this.noZoom = false;
	this.noPan = false;

	this.staticMoving = false;
	this.dynamicDampingFactor = 0.2;

	this.minDistance = 0;
	this.maxDistance = Infinity;

	this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];

	// internals

	this.target = new THREE.Vector3();

	var EPS = 0.000001;

	var lastPosition = new THREE.Vector3();

	var _state = STATE.NONE,
	_prevState = STATE.NONE,

	_eye = new THREE.Vector3(),

	_movePrev = new THREE.Vector2(),
	_moveCurr = new THREE.Vector2(),

	_lastAxis = new THREE.Vector3(),
	_lastAngle = 0,

	_zoomStart = new THREE.Vector2(),
	_zoomEnd = new THREE.Vector2(),

	_touchZoomDistanceStart = 0,
	_touchZoomDistanceEnd = 0,

	_panStart = new THREE.Vector2(),
	_panEnd = new THREE.Vector2();

	// for reset

	this.target0 = this.target.clone();
	this.position0 = this.object.position.clone();
	this.up0 = this.object.up.clone();

	// events

	var changeEvent = { type: 'change' };
	var startEvent = { type: 'start' };
	var endEvent = { type: 'end' };


	// methods

	this.handleResize = function () {

		if ( this.domElement === document ) {

			this.screen.left = 0;
			this.screen.top = 0;
			this.screen.width = window.innerWidth;
			this.screen.height = window.innerHeight;

		} else {

			var box = this.domElement.getBoundingClientRect();
			// adjustments come from similar code in the jquery offset() function
			var d = this.domElement.ownerDocument.documentElement;
			this.screen.left = box.left + window.pageXOffset - d.clientLeft;
			this.screen.top = box.top + window.pageYOffset - d.clientTop;
			this.screen.width = box.width;
			this.screen.height = box.height;

		}

	};

	this.handleEvent = function ( event ) {

		if ( typeof this[ event.type ] == 'function' ) {

			this[ event.type ]( event );

		}

	};

	var getMouseOnScreen = ( function () {

		var vector = new THREE.Vector2();

		return function getMouseOnScreen( pageX, pageY ) {

			vector.set(
				( pageX - _this.screen.left ) / _this.screen.width,
				( pageY - _this.screen.top ) / _this.screen.height
			);

			return vector;

		};

	}() );

	var getMouseOnCircle = ( function () {

		var vector = new THREE.Vector2();

		return function getMouseOnCircle( pageX, pageY ) {

			vector.set(
				( ( pageX - _this.screen.width * 0.5 - _this.screen.left ) / ( _this.screen.width * 0.5 ) ),
				( ( _this.screen.height + 2 * ( _this.screen.top - pageY ) ) / _this.screen.width ) // screen.width intentional
			);

			return vector;

		};

	}() );

	this.rotateCamera = ( function() {

		var axis = new THREE.Vector3(),
			quaternion = new THREE.Quaternion(),
			eyeDirection = new THREE.Vector3(),
			objectUpDirection = new THREE.Vector3(),
			objectSidewaysDirection = new THREE.Vector3(),
			moveDirection = new THREE.Vector3(),
			angle;

		return function rotateCamera() {

			moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 );
			angle = moveDirection.length();

			if ( angle ) {

				_eye.copy( _this.object.position ).sub( _this.target );

				eyeDirection.copy( _eye ).normalize();
				objectUpDirection.copy( _this.object.up ).normalize();
				objectSidewaysDirection.crossVectors( objectUpDirection, eyeDirection ).normalize();

				objectUpDirection.setLength( _moveCurr.y - _movePrev.y );
				objectSidewaysDirection.setLength( _moveCurr.x - _movePrev.x );

				moveDirection.copy( objectUpDirection.add( objectSidewaysDirection ) );

                //contrain to X axis only
				axis.crossVectors( moveDirection, _eye ).normalize();
                axis.z = axis.x = 0.0;
                
				angle *= _this.rotateSpeed;
				quaternion.setFromAxisAngle( axis, angle );

				_eye.applyQuaternion( quaternion );
				_this.object.up.applyQuaternion( quaternion );

				_lastAxis.copy( axis );
				_lastAngle = angle;

			} else if ( ! _this.staticMoving && _lastAngle ) {

				_lastAngle *= Math.sqrt( 1.0 - _this.dynamicDampingFactor );
				_eye.copy( _this.object.position ).sub( _this.target );
				quaternion.setFromAxisAngle( _lastAxis, _lastAngle );
				_eye.applyQuaternion( quaternion );
				_this.object.up.applyQuaternion( quaternion );

			}

			_movePrev.copy( _moveCurr );

		};

	}() );


	this.zoomCamera = function () {

		var factor;

		if ( _state === STATE.TOUCH_ZOOM_PAN ) {

			factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
			_touchZoomDistanceStart = _touchZoomDistanceEnd;
			_eye.multiplyScalar( factor );

		} else {

			factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;

			if ( factor !== 1.0 && factor > 0.0 ) {

				_eye.multiplyScalar( factor );

			}

			if ( _this.staticMoving ) {

				_zoomStart.copy( _zoomEnd );

			} else {

				_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;

			}

		}

	};

	this.panCamera = ( function() {

		var mouseChange = new THREE.Vector2(),
			objectUp = new THREE.Vector3(),
			pan = new THREE.Vector3();

		return function panCamera() {

			mouseChange.copy( _panEnd ).sub( _panStart );

			if ( mouseChange.lengthSq() ) {

				mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );

				pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x );
				pan.add( objectUp.copy( _this.object.up ).setLength( mouseChange.y ) );

				_this.object.position.add( pan );
				_this.target.add( pan );

				if ( _this.staticMoving ) {

					_panStart.copy( _panEnd );

				} else {

					_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );

				}

			}

		};

	}() );

	this.checkDistances = function () {

		if ( ! _this.noZoom || ! _this.noPan ) {

			if ( _eye.lengthSq() > _this.maxDistance * _this.maxDistance ) {

				_this.object.position.addVectors( _this.target, _eye.setLength( _this.maxDistance ) );
				_zoomStart.copy( _zoomEnd );

			}

			if ( _eye.lengthSq() < _this.minDistance * _this.minDistance ) {

				_this.object.position.addVectors( _this.target, _eye.setLength( _this.minDistance ) );
				_zoomStart.copy( _zoomEnd );

			}

		}

	};

	this.update = function () {

		_eye.subVectors( _this.object.position, _this.target );

		if ( ! _this.noRotate ) {

			_this.rotateCamera();

		}

		if ( ! _this.noZoom ) {

			_this.zoomCamera();

		}

		if ( ! _this.noPan ) {

			_this.panCamera();

		}

		_this.object.position.addVectors( _this.target, _eye );

		_this.checkDistances();

		_this.object.lookAt( _this.target );

		if ( lastPosition.distanceToSquared( _this.object.position ) > EPS ) {

			_this.dispatchEvent( changeEvent );

			lastPosition.copy( _this.object.position );

		}

	};

	this.reset = function () {

		_state = STATE.NONE;
		_prevState = STATE.NONE;

		_this.target.copy( _this.target0 );
		_this.object.position.copy( _this.position0 );
		_this.object.up.copy( _this.up0 );

		_eye.subVectors( _this.object.position, _this.target );

		_this.object.lookAt( _this.target );

		_this.dispatchEvent( changeEvent );

		lastPosition.copy( _this.object.position );

	};

	// listeners

	function keydown( event ) {

		if ( _this.enabled === false ) return;

		window.removeEventListener( 'keydown', keydown );

		_prevState = _state;

		if ( _state !== STATE.NONE ) {

			return;

		} else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && ! _this.noRotate ) {

			_state = STATE.ROTATE;

		} else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && ! _this.noZoom ) {

			_state = STATE.ZOOM;

		} else if ( event.keyCode === _this.keys[ STATE.PAN ] && ! _this.noPan ) {

			_state = STATE.PAN;

		}

	}

	function keyup( event ) {

		if ( _this.enabled === false ) return;

		_state = _prevState;

		window.addEventListener( 'keydown', keydown, false );

	}

	function mousedown( event ) {

		if ( _this.enabled === false ) return;

		event.preventDefault();
		event.stopPropagation();

		if ( _state === STATE.NONE ) {

			_state = event.button;

		}

		if ( _state === STATE.ROTATE && ! _this.noRotate ) {

			_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
			_movePrev.copy( _moveCurr );

		} else if ( _state === STATE.ZOOM && ! _this.noZoom ) {

			_zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
			_zoomEnd.copy( _zoomStart );

		} else if ( _state === STATE.PAN && ! _this.noPan ) {

			_panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
			_panEnd.copy( _panStart );

		}

		document.addEventListener( 'mousemove', mousemove, false );
		document.addEventListener( 'mouseup', mouseup, false );

		_this.dispatchEvent( startEvent );

	}

	function mousemove( event ) {

		if ( _this.enabled === false ) return;

		event.preventDefault();
		event.stopPropagation();

		if ( _state === STATE.ROTATE && ! _this.noRotate ) {

			_movePrev.copy( _moveCurr );
			_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );

		} else if ( _state === STATE.ZOOM && ! _this.noZoom ) {

			_zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );

		} else if ( _state === STATE.PAN && ! _this.noPan ) {

			_panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );

		}

	}

	function mouseup( event ) {

		if ( _this.enabled === false ) return;

		event.preventDefault();
		event.stopPropagation();

		_state = STATE.NONE;

		document.removeEventListener( 'mousemove', mousemove );
		document.removeEventListener( 'mouseup', mouseup );
		_this.dispatchEvent( endEvent );

	}

	function mousewheel( event ) {

		if ( _this.enabled === false ) return;

		event.preventDefault();
		event.stopPropagation();

		switch ( event.deltaMode ) {

			case 2:
				// Zoom in pages
				_zoomStart.y -= event.deltaY * 0.025;
				break;

			case 1:
				// Zoom in lines
				_zoomStart.y -= event.deltaY * 0.01;
				break;

			default:
				// undefined, 0, assume pixels
				_zoomStart.y -= event.deltaY * 0.00025;
				break;

		}

		_this.dispatchEvent( startEvent );
		_this.dispatchEvent( endEvent );

	}

	function touchstart( event ) {

		if ( _this.enabled === false ) return;

		switch ( event.touches.length ) {

			case 1:
				_state = STATE.TOUCH_ROTATE;
				_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
				_movePrev.copy( _moveCurr );
				break;

			default: // 2 or more
				_state = STATE.TOUCH_ROTATE;
				_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
				_movePrev.copy( _moveCurr );
				break;
				break;

		}

		_this.dispatchEvent( startEvent );

	}

	function touchmove( event ) {

		if ( _this.enabled === false ) return;

		event.preventDefault();
		event.stopPropagation();

		switch ( event.touches.length ) {

			case 1:
				_movePrev.copy( _moveCurr );
				_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
				break;

			default: // 2 or more
				var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
				var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
				_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );

				var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
				var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
				_panEnd.copy( getMouseOnScreen( x, y ) );
				break;

		}

	}

	function touchend( event ) {

		if ( _this.enabled === false ) return;

		switch ( event.touches.length ) {

			case 0:
				_state = STATE.NONE;
				break;

			case 1:
				_state = STATE.TOUCH_ROTATE;
				_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
				_movePrev.copy( _moveCurr );
				break;

		}

		_this.dispatchEvent( endEvent );

	}

	function contextmenu( event ) {

		if ( _this.enabled === false ) return;

		event.preventDefault();

	}

	this.dispose = function() {

		this.domElement.removeEventListener( 'contextmenu', contextmenu, false );
		this.domElement.removeEventListener( 'mousedown', mousedown, false );
		//this.domElement.removeEventListener( 'wheel', mousewheel, false );

		//this.domElement.removeEventListener( 'touchstart', touchstart, false );
		//this.domElement.removeEventListener( 'touchend', touchend, false );
		//this.domElement.removeEventListener( 'touchmove', touchmove, false );

		document.removeEventListener( 'mousemove', mousemove, false );
		document.removeEventListener( 'mouseup', mouseup, false );

		window.removeEventListener( 'keydown', keydown, false );
		window.removeEventListener( 'keyup', keyup, false );

	};

	this.domElement.addEventListener( 'contextmenu', contextmenu, false );
	this.domElement.addEventListener( 'mousedown', mousedown, false );
	//this.domElement.addEventListener( 'wheel', mousewheel, false );

    //this.domElement.addEventListener( 'touchstart', touchstart, false );
	//this.domElement.addEventListener( 'touchend', touchend, false );
	//this.domElement.addEventListener( 'touchmove', touchmove, false );

	window.addEventListener( 'keydown', keydown, false );
	window.addEventListener( 'keyup', keyup, false );

	this.handleResize();

	// force an update at start
	this.update();

};

THREE.TrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype );
THREE.TrackballControls.prototype.constructor = THREE.TrackballControls;