D3.JS / THREE.JS : A hybrid 3D scatter plot MkII [with dynamic axes]

README.md

An extended version of https://bl.ocks.org/vkuchinov/a8248a3487da0d7c7f6e002845d00038

This version is based on OrbitControls.js.

Possibly should deligate some processes to worker.js or GLSL. Using BufferGeometry istead of Geometry is another option.

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="OrbitControls.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>
        <button style="right: 64px" id="showGrid" class="ui" onclick="turnGridOnOff()">Show Grid</button>
        <button style="right: 150px" id="scaleGrid" class="ui" onclick="turnOnOffScale()">Static Grid</button>
	    
        <svg id="scatter3D" width="0" height="0"></svg>

        <div id="tooltip">

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

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

    </body>
    
</html>

main.js

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

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

var limits = { x: { min: -10, max: 10 }, y: { min: -10, max: 10 }, z: { min: -10, max: 10 } }

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

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

var xAxis, yAxis, zAxis;
var scalable = false;
var gridVisible = false;

var xScale = d3.scaleLinear().range([0, window.innerWidth * 0.25]).domain([limits.x.min, limits.x.max]);

var yScale = d3.scaleLinear().range([0, window.innerWidth * 0.25]).domain([limits.y.min, limits.y.max]);

var zScale = d3.scaleLinear().range([0, window.innerWidth * 0.25]).domain([limits.z.min, limits.z.max]);

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);

    xAxis = svg.append("g").attr("transform", "translate( " + (window.innerWidth - 32) + "," + ((window.innerHeight / 2) - window.innerHeight * 0.25) + ")").call(d3.axisLeft(xScale).ticks(6));

    var xLabel = svg.append("text").attr("transform", "translate( " + (window.innerWidth - 40) + "," + ((window.innerHeight / 2) - window.innerHeight * 0.25 - 20) + ")").attr("font-family", "sans-serif").text("X");

    yAxis = svg.append("g").attr("transform", "translate(" +  + ((window.innerWidth / 2) - window.innerWidth * 0.125) + ", 32)").call(d3.axisTop(yScale).ticks(6));
    
    var yLabel = svg.append("text").attr("transform", "translate(" +  + ((window.innerWidth / 2) - window.innerWidth * 0.125 - 32) + ", 32)").attr("font-family", "sans-serif").text("Y");

    zAxis = svg.append("g").attr("transform", "translate(32," + ((window.innerHeight / 2) - window.innerHeight * 0.25) + ")").call(d3.axisLeft(zScale).ticks(6));

    var zLabel = svg.append("text").attr("transform", "translate(26," + ((window.innerHeight / 2) - window.innerHeight * 0.25 - 20) + ")").attr("font-family", "sans-serif").text("Z");

    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.OrbitControls( camera, document );
    controls.enableDamping = true; 
    controls.dampingFactor = 0.25;
    controls.screenSpacePanning = false;
    controls.minDistance = 100;
    controls.maxDistance = 500;
    controls.maxPolarAngle = Math.PI / 2;

    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();

    if(!scalable){
    axes = [

        [new THREE.Vector3(-196.0 / scale, 1E-5, 1E-5), new THREE.Vector3(196.0 / scale, 1E-5, 1E-5)],
        [new THREE.Vector3(1E-5, -196.0 / scale, 1E-5), new THREE.Vector3(1E-5, 196.0 / scale, 1E-5)],
        [new THREE.Vector3(1E-5, 1E-5, -196.0 / scale), 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)

    ];
      
    grids = [];

    for(var xz = 0; xz <= 147.0; xz += 12.25){
        
            grids.push([new THREE.Vector3(xz / scale, 1E-5, 1E-5), new THREE.Vector3(xz / scale, 1E-5, 147 / scale)]);
        
            grids.push([new THREE.Vector3(1E-5, 1E-5, xz / scale), new THREE.Vector3(147.0 / scale, 1E-5, xz / scale)]);
   
    }

        
    }
    else {
        
        axes = [

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

    ];
    
    labels = [

        new THREE.Vector3(212.0, 1E-5, 1E-5),
        new THREE.Vector3(1E-5, 212.0, 1E-5),
        new THREE.Vector3(1E-5, 1E-5, 222.0)
        
    ];
        
    grids = [];

    for(var xz = 0; xz <= 147.0; xz += 12.25){
        
            grids.push([new THREE.Vector3(xz, 1E-5, 1E-5), new THREE.Vector3(xz, 1E-5, 147.0 / scale)]);
        
            grids.push([new THREE.Vector3(1E-5, 1E-5, xz), new THREE.Vector3(147, 1E-5, xz)]);
   
    }
        
    }

    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_){
    
limits = {
    
    x: { min: Number.POSITIVE_INFINITY, max: Number.NEGATIVE_INFINITY },
    y: { min: Number.POSITIVE_INFINITY, max: Number.NEGATIVE_INFINITY },
    z: { min: Number.POSITIVE_INFINITY, max: Number.NEGATIVE_INFINITY }
    
};

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", function(d_){
    
                if(isPointOnScreen(d_, p_)){ 
           
                    limits.x.min = Math.min((d_.x + p_.x) / 16.0, limits.x.min);
                    limits.x.max = Math.max((d_.x + p_.x) / 16.0, limits.x.max);
                    
                    limits.y.min = Math.min((d_.y + p_.y) / 16.0, limits.y.min);
                    limits.y.max = Math.max((d_.y + p_.y) / 16.0, limits.y.max);
                    
                    limits.z.min = Math.min((d_.z + p_.z) / 16.0, limits.z.min);
                    limits.z.max = Math.max((d_.z + p_.z) / 16.0, limits.z.max);

                    return 0.6; 

                }
    
                return 0.6; 

                })
                .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();

if(gridVisible){
    
var projectedGrids = svg.selectAll("line.Grids").data(grids);

projectedGrids.enter()
            .append("line")
            .attr("class", "3d_ Grids")
            .merge(projectedGrids)
            .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", "#DEDEDE")
            .attr("stroke-width", 0.25);

projectedGrids.exit().remove();
    
}
    
var projectedAxes = svg.selectAll("line.Axes3").data(axes);

projectedAxes.enter()
            .append("line")
            .attr("class", "3d_ Axes3")
            .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.Labels").data(labels);

projectedLabels.enter()
            .append("text")
            .attr("class", "Labels")
            .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_) { var l = ["x", "y", "z"]; return l[i_]; });

projectedLabels.exit().remove();

xScale.domain([limits.x.min, limits.x.max]);
yScale.domain([limits.y.min, limits.y.max]);
zScale.domain([limits.z.min, limits.z.max]);
    
xAxis.call(d3.axisLeft(xScale).ticks(6));
yAxis.call(d3.axisTop(yScale).ticks(6));
zAxis.call(d3.axisLeft(zScale).ticks(6));
    
}

function isPointOnScreen(d_, p_){
    
    var tmp = new THREE.Vector3(d_.x + p_.x, d_.y + p_.y, d_.z + p_.z);
    
    var xy = toScreenXY(tmp.x, tmp.y, tmp.z, camera);

    if(!xy.x.between([0, window.innerWidth])) { return false; }
    if(!xy.y.between([0, window.innerHeight])) { return false; }
    
    return true;
    
}


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();

    }

}

function turnOnOffScale(){

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

    if(b.innerHTML == "Static Grid") { 

        scalable = true;
        b.innerHTML = "Scalable Grid";

    }
    else {

        scalable = false;
        b.innerHTML = "Static Grid";

    }

}

function turnGridOnOff(){

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

    if(b.innerHTML == "Show Grid") { 

        gridVisible = true;
        b.innerHTML = "Hide Grid";

    }
    else {

        gridVisible = false;
        b.innerHTML = "Show Grid";
        d3.selectAll(".Grids").remove();

    }

}


Number.prototype.between = function(domain_) {

    var min = Math.min.apply(Math, domain_);
    var max = Math.max.apply(Math, domain_);

    return this >= min && this <= max;

};

OrbitControls.js

/**
 * @author qiao / https://github.com/qiao
 * @author mrdoob / http://mrdoob.com
 * @author alteredq / http://alteredqualia.com/
 * @author WestLangley / http://github.com/WestLangley
 */

THREE.OrbitControls = function ( object, domElement ) {

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

	// API

	this.enabled = true;

	this.center = new THREE.Vector3();

	this.userZoom = true;
	this.userZoomSpeed = 1.0;

	this.userRotate = true;
	this.userRotateSpeed = 1.0;

	this.userPan = true;
	this.userPanSpeed = 2.0;

	this.autoRotate = false;
	this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60

	this.minPolarAngle = 0; // radians
	this.maxPolarAngle = Math.PI; // radians

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

	// 65 /*A*/, 83 /*S*/, 68 /*D*/
	this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40, ROTATE: 65, ZOOM: 83, PAN: 68 };

	// internals

	var scope = this;

	var EPS = 0.000001;
	var PIXELS_PER_ROUND = 1800;

	var rotateStart = new THREE.Vector2();
	var rotateEnd = new THREE.Vector2();
	var rotateDelta = new THREE.Vector2();

	var zoomStart = new THREE.Vector2();
	var zoomEnd = new THREE.Vector2();
	var zoomDelta = new THREE.Vector2();

	var phiDelta = 0;
	var thetaDelta = 0;
	var scale = 1;

	var lastPosition = new THREE.Vector3();

	var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2 };
	var state = STATE.NONE;

	// events

	var changeEvent = { type: 'change' };


	this.rotateLeft = function ( angle ) {

		if ( angle === undefined ) {

			angle = getAutoRotationAngle();

		}

		thetaDelta -= angle;

	};

	this.rotateRight = function ( angle ) {

		if ( angle === undefined ) {

			angle = getAutoRotationAngle();

		}

		thetaDelta += angle;

	};

	this.rotateUp = function ( angle ) {

		if ( angle === undefined ) {

			angle = getAutoRotationAngle();

		}

		phiDelta -= angle;

	};

	this.rotateDown = function ( angle ) {

		if ( angle === undefined ) {

			angle = getAutoRotationAngle();

		}

		phiDelta += angle;

	};

	this.zoomIn = function ( zoomScale ) {

		if ( zoomScale === undefined ) {

			zoomScale = getZoomScale();

		}

		scale /= zoomScale;

	};

	this.zoomOut = function ( zoomScale ) {

		if ( zoomScale === undefined ) {

			zoomScale = getZoomScale();

		}

		scale *= zoomScale;

	};

	this.pan = function ( distance ) {

		distance.transformDirection( this.object.matrix );
		distance.multiplyScalar( scope.userPanSpeed );

		this.object.position.add( distance );
		this.center.add( distance );

	};

	this.update = function () {

		var position = this.object.position;
		var offset = position.clone().sub( this.center );

		// angle from z-axis around y-axis

		var theta = Math.atan2( offset.x, offset.z );

		// angle from y-axis

		var phi = Math.atan2( Math.sqrt( offset.x * offset.x + offset.z * offset.z ), offset.y );

		if ( this.autoRotate ) {

			this.rotateLeft( getAutoRotationAngle() );

		}

		theta += thetaDelta;
		phi += phiDelta;

		// restrict phi to be between desired limits
		phi = Math.max( this.minPolarAngle, Math.min( this.maxPolarAngle, phi ) );

		// restrict phi to be betwee EPS and PI-EPS
		phi = Math.max( EPS, Math.min( Math.PI - EPS, phi ) );

		var radius = offset.length() * scale;

		// restrict radius to be between desired limits
		radius = Math.max( this.minDistance, Math.min( this.maxDistance, radius ) );

		offset.x = radius * Math.sin( phi ) * Math.sin( theta );
		offset.y = radius * Math.cos( phi );
		offset.z = radius * Math.sin( phi ) * Math.cos( theta );

		position.copy( this.center ).add( offset );

		this.object.lookAt( this.center );

		thetaDelta = 0;
		phiDelta = 0;
		scale = 1;

		if ( lastPosition.distanceTo( this.object.position ) > 0 ) {

			this.dispatchEvent( changeEvent );

			lastPosition.copy( this.object.position );

		}

	};


	function getAutoRotationAngle() {

		return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;

	}

	function getZoomScale() {

		return Math.pow( 0.95, scope.userZoomSpeed );

	}

	function onMouseDown( event ) {

		if ( scope.enabled === false ) return;
		if ( scope.userRotate === false ) return;

		event.preventDefault();

		if ( state === STATE.NONE )
		{
			if ( event.button === 0 )
				state = STATE.ROTATE;
			if ( event.button === 1 )
				state = STATE.ZOOM;
			if ( event.button === 2 )
				state = STATE.PAN;
		}
		
		
		if ( state === STATE.ROTATE ) {

			//state = STATE.ROTATE;

			rotateStart.set( event.clientX, event.clientY );

		} else if ( state === STATE.ZOOM ) {

			//state = STATE.ZOOM;

			zoomStart.set( event.clientX, event.clientY );

		} else if ( state === STATE.PAN ) {

			//state = STATE.PAN;

		}

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

	}

	function onMouseMove( event ) {

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

		event.preventDefault();

		
		
		if ( state === STATE.ROTATE ) {

			rotateEnd.set( event.clientX, event.clientY );
			rotateDelta.subVectors( rotateEnd, rotateStart );

			scope.rotateLeft( 2 * Math.PI * rotateDelta.x / PIXELS_PER_ROUND * scope.userRotateSpeed );
			scope.rotateUp( 2 * Math.PI * rotateDelta.y / PIXELS_PER_ROUND * scope.userRotateSpeed );

			rotateStart.copy( rotateEnd );

		} else if ( state === STATE.ZOOM ) {

			zoomEnd.set( event.clientX, event.clientY );
			zoomDelta.subVectors( zoomEnd, zoomStart );

			if ( zoomDelta.y > 0 ) {

				scope.zoomIn();

			} else {

				scope.zoomOut();

			}

			zoomStart.copy( zoomEnd );

		} else if ( state === STATE.PAN ) {

			var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
			var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;

			scope.pan( new THREE.Vector3( - movementX, movementY, 0 ) );

		}

	}

	function onMouseUp( event ) {

		if ( scope.enabled === false ) return;
		if ( scope.userRotate === false ) return;

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

		state = STATE.NONE;

	}

	function onMouseWheel( event ) {

		if ( scope.enabled === false ) return;
		if ( scope.userZoom === false ) return;

		var delta = 0;

		if ( event.wheelDelta ) { // WebKit / Opera / Explorer 9

			delta = event.wheelDelta;

		} else if ( event.detail ) { // Firefox

			delta = - event.detail;

		}

		if ( delta > 0 ) {

			scope.zoomOut();

		} else {

			scope.zoomIn();

		}

	}

	function onKeyDown( event ) {

		if ( scope.enabled === false ) return;
		if ( scope.userPan === false ) return;

		switch ( event.keyCode ) {

			/*case scope.keys.UP:
				scope.pan( new THREE.Vector3( 0, 1, 0 ) );
				break;
			case scope.keys.BOTTOM:
				scope.pan( new THREE.Vector3( 0, - 1, 0 ) );
				break;
			case scope.keys.LEFT:
				scope.pan( new THREE.Vector3( - 1, 0, 0 ) );
				break;
			case scope.keys.RIGHT:
				scope.pan( new THREE.Vector3( 1, 0, 0 ) );
				break;
			*/
			case scope.keys.ROTATE:
				state = STATE.ROTATE;
				break;
			case scope.keys.ZOOM:
				state = STATE.ZOOM;
				break;
			case scope.keys.PAN:
				state = STATE.PAN;
				break;
				
		}

	}
	
	function onKeyUp( event ) {

		switch ( event.keyCode ) {

			case scope.keys.ROTATE:
			case scope.keys.ZOOM:
			case scope.keys.PAN:
				state = STATE.NONE;
				break;
		}

	}

	this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
	this.domElement.addEventListener( 'mousedown', onMouseDown, false );
	this.domElement.addEventListener( 'mousewheel', onMouseWheel, false );
	this.domElement.addEventListener( 'DOMMouseScroll', onMouseWheel, false ); // firefox
	window.addEventListener( 'keydown', onKeyDown, false );
	window.addEventListener( 'keyup', onKeyUp, false );

};

THREE.OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype );

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