Threejs - Click Drag Move2

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);
	  controls.screenSpacePanning = true;
	  //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, 0, 1);
	  plane.set(planeNormalDirection, planeOriginOffsetConstant);


	  // 2d grabspot
	  var grabPadding = 20;
	  var g1 = createGrabSpot('grabSpot');
	  var g2 = createGrabSpot('grabSpot');
	  var g3 = createGrabSpot('grabSpot');
	 ...