Threejs - Click Drag Move

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<div id="imgContainer">

</div>

JavaScript

"use strict";
  
var scene, renderer, camera, controls;

init();
animate();


function init()
{	
    renderer = new THREE.WebGLRenderer( {antialias:true, alpha: true } );
	var width = window.innerWidth;
	var height = window.innerHeight;

    renderer.setSize (width, height);
    renderer.setClearColor(0x000000, 1);   //using clear background color
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    
	document.body.appendChild (renderer.domElement);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera (60, width/height, 1, 10000);
	camera.position.y = 0;
	camera.position.z = 40;
	//camera.lookAt (new THREE.Vector3(0,0,0));
    
  scene.add( camera );

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  //disableOrbit();
    
	var gridXZ = new THREE.GridHelper(100, 10, 
  	new THREE.Color(0xffffff), 
  	new THREE.Color(0xffffff)
  );
  gridXZ.rotateX(THREE.Math.degToRad(-90));
  //gridXZ.position.z -= .5;
	scene.add(gridXZ);  
  
  //lights
  //createDirectionalLight();
  
  
  
  //var customExtrudePlane = createExtrudedShape();
  //flipNormals(customExtrudePlane);
  
  //var plane = createShape2d();
  //plane.material.map = getTexture('HellO');
  //plane.material.needsUpdate = true;
  
  // 3d box
  // var boxGeo = new THREE.BoxGeometry(20,20,20);
  // var boxMesh = new THREE.Mesh(boxGeo, new THREE.MeshLambertMaterial({color:0xff00ff}));
  // scene.add(boxMesh);
  
  // plane intersect helper
  var offset = new THREE.Vector3();
  var intersection = new THREE.Vector3();
  var plane = new THREE.Plane();
  // plane constraint and plane origin offset
  var planeOriginOffsetConstant = 0;
  var planeNormalDirection = new THREE.Vector3(0,1,0);
  plane.set(planeNormalDirection, planeOriginOffsetConstant);
  
  
  // 2d grabspot
  var g1 = createGrabSpot('grabSpot');
  var g2 = createGrabSpot('grabSpot');
  
  // to demo we can click through multiple objects and filter only what we want selected
  //var s1 = createShape2d();
 ...