yelouafi/gist:e25b8ebc7b0b52dd4268f0d7b53040e6

## gistfile1.html
<!DOCTYPE html>
<html>

<head>
    <title>THREE.JS WORLD</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to
             use the complete page */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script>
function init() {
  var scene = new THREE.Scene()

  // Create a perspective camera
  var viewAngle = 45
  var width = window.innerWidth
  var height = window.innerHeight
  var ratio = width / height
  var near = 0.1
  var far = 3000
  var camera = new THREE.PerspectiveCamera(viewAngle,ratio,near,far)

  // create a render and set the size
  var renderer = new THREE.WebGLRenderer()
  renderer.setClearColor(new THREE.Color(0xEEEEEE))
  renderer.setSize(width, height)

  // create the ground plane
  var planeGeometry = new THREE.PlaneGeometry(1000, 1000)
  var yellowMaterial = new THREE.MeshBasicMaterial({
    color: 0xffff00
  , opacity: 0.25
  , transparent: true
  })
  var cyanMaterial = new THREE.MeshBasicMaterial({
    color: 0x00ffff
  , opacity: 0.5
  , transparent: true
  })
  var magentaMaterial = new THREE.MeshBasicMaterial({
    color: 0xff00ff
  , opacity: 0.5
  , transparent: true
  })
  var xyPlane = new THREE.Mesh(planeGeometry, yellowMaterial)
  scene.add(xyPlane)

  var yzPlane = new THREE.Mesh(planeGeometry, cyanMaterial)
  yzPlane.rotation.y = 0.5 * Math.PI
  scene.add(yzPlane)

  var xzPlane = new THREE.Mesh(planeGeometry, magentaMaterial)
  xzPlane.rotation.x = -0.5 * Math.PI
  scene.add(xzPlane)

  // position and point the camera to the center of the scene
  camera.position.x = 500
  camera.position.y = 700
  camera.position.z = 1300
  camera.lookAt(scene.position)

  // add the output of the renderer to the html element
  document.getElementById("WebGL-output").appendChild(renderer.domElement)

  ;(function createObjectManipulator(scene, camera){
     // <FOR TESTING ONLY>
    var dragPlane
    var dragCube
    var cameraPosition
    var zAxis

    ;(function testing() {
      scene.add(camera)

      // DRAG PLANE
      var side = 2000
      var segments = 20
      var planeGeometry = new THREE.PlaneBufferGeometry(side, side, segments, segments)
      var planeMaterial = new THREE.MeshBasicMaterial({
        color: 0x000000
      , wireframe: false
      , transparent: true
      , opacity: 0.5})
      dragPlane = new THREE.Mesh(planeGeometry, planeMaterial)

      var angle = camera.fov * Math.PI / 360
      var distance = side / 2 / Math.tan(angle)
      dragPlane.translateZ(-distance)
      dragPlane.scale.x = camera.aspect
      camera.add(dragPlane)

      // CUBE TO DRAG
      var cubeGeometry = new THREE.BoxGeometry(40, 40, 40)
      var cubeMaterial = new THREE.MeshBasicMaterial({
        color: 0xffffff
      , wireframe: true})
      dragCube = new THREE.Mesh(cubeGeometry, cubeMaterial)

      // CAMERA
      cameraPosition = new THREE.Vector3()
      camera.updateMatrixWorld()
      cameraPosition.setFromMatrixPosition( camera.matrixWorld )

      zAxis = camera.getWorldDirection().negate()
    })()
    // </FOR TESTING ONLY>

    var viewport = window
    var viewWidth = viewport.innerWidth
    var viewHeight = viewport.innerHeight

    ;(function cameraProjectDemo(){
      viewport.addEventListener( 'mousedown', startDrag, false )

      var target
        , viewClickPoint

      function startDrag(event) {
        window.addEventListener( 'mousemove', drag, false )
        window.addEventListener( 'mouseup', stopDrag, false )

        var viewPoint = getViewPoint(event)
        target = getModelUnderMouse(viewPoint)

        if (!target) {
          stopDrag()
          return
        }

        viewClickPoint = target.point.clone().project(camera)

        ;(function testing(){
          dragCube.position.copy(target.point)
          scene.add(dragCube)
          var distanceToCube = target.point.clone()
                                           .sub(cameraPosition)
                                           .dot(zAxis)
          dragPlane.position.z = distanceToCube
        })()
      }

      function drag(event) {
        var viewPoint = getViewPoint(event, viewClickPoint.z)
        var worldPoint = viewPoint.clone().unproject(camera)
        dragCube.position.copy(worldPoint)
      }

      function stopDrag(event) {
        window.removeEventListener( 'mousemove', drag, false )
        window.removeEventListener( 'mouseup', stopDrag, false )
      }

      function getViewPoint(event, z) {
        var viewPoint = new THREE.Vector3()

        viewPoint.x = (event.clientX / viewWidth) * 2 - 1
        viewPoint.y = 1 - (event.clientY / viewHeight) * 2
        viewPoint.z = z || 0

        return viewPoint
      }

      function getModelUnderMouse(viewPoint) {
        var raycaster = new THREE.Raycaster()

        raycaster.setFromCamera( viewPoint, camera )
        intersects = raycaster.intersectObjects(scene.children)

        return intersects[0] // may be undefined
      }
    })()
  })(scene, camera)

  ;(function render() {
    renderer.render(scene, camera)
    requestAnimationFrame(render)
  })()
}

window.onload = init
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>THREE.JS WORLD</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
	<style>
	body {
	/* set margin to 0 and overflow to hidden, to
	use the complete page */
	margin: 0;
	overflow: hidden;
	}
	</style>
	</head>
	<body>

	<!-- Div which will hold the Output -->
	<div id="WebGL-output">
	</div>

	<!-- Javascript code that runs our Three.js examples -->
	<script>
	function init() {
	var scene = new THREE.Scene()

	// Create a perspective camera
	var viewAngle = 45
	var width = window.innerWidth
	var height = window.innerHeight
	var ratio = width / height
	var near = 0.1
	var far = 3000
	var camera = new THREE.PerspectiveCamera(viewAngle,ratio,near,far)

	// create a render and set the size
	var renderer = new THREE.WebGLRenderer()
	renderer.setClearColor(new THREE.Color(0xEEEEEE))
	renderer.setSize(width, height)

	// create the ground plane
	var planeGeometry = new THREE.PlaneGeometry(1000, 1000)
	var yellowMaterial = new THREE.MeshBasicMaterial({
	color: 0xffff00
	, opacity: 0.25
	, transparent: true
	})
	var cyanMaterial = new THREE.MeshBasicMaterial({
	color: 0x00ffff
	, opacity: 0.5
	, transparent: true
	})
	var magentaMaterial = new THREE.MeshBasicMaterial({
	color: 0xff00ff
	, opacity: 0.5
	, transparent: true
	})
	var xyPlane = new THREE.Mesh(planeGeometry, yellowMaterial)
	scene.add(xyPlane)

	var yzPlane = new THREE.Mesh(planeGeometry, cyanMaterial)
	yzPlane.rotation.y = 0.5 * Math.PI
	scene.add(yzPlane)

	var xzPlane = new THREE.Mesh(planeGeometry, magentaMaterial)
	xzPlane.rotation.x = -0.5 * Math.PI
	scene.add(xzPlane)

	// position and point the camera to the center of the scene
	camera.position.x = 500
	camera.position.y = 700
	camera.position.z = 1300
	camera.lookAt(scene.position)

	// add the output of the renderer to the html element
	document.getElementById("WebGL-output").appendChild(renderer.domElement)

	;(function createObjectManipulator(scene, camera){
	// <FOR TESTING ONLY>
	var dragPlane
	var dragCube
	var cameraPosition
	var zAxis

	;(function testing() {
	scene.add(camera)

	// DRAG PLANE
	var side = 2000
	var segments = 20
	var planeGeometry = new THREE.PlaneBufferGeometry(side, side, segments, segments)
	var planeMaterial = new THREE.MeshBasicMaterial({
	color: 0x000000
	, wireframe: false
	, transparent: true
	, opacity: 0.5})
	dragPlane = new THREE.Mesh(planeGeometry, planeMaterial)

	var angle = camera.fov * Math.PI / 360
	var distance = side / 2 / Math.tan(angle)
	dragPlane.translateZ(-distance)
	dragPlane.scale.x = camera.aspect
	camera.add(dragPlane)

	// CUBE TO DRAG
	var cubeGeometry = new THREE.BoxGeometry(40, 40, 40)
	var cubeMaterial = new THREE.MeshBasicMaterial({
	color: 0xffffff
	, wireframe: true})
	dragCube = new THREE.Mesh(cubeGeometry, cubeMaterial)

	// CAMERA
	cameraPosition = new THREE.Vector3()
	camera.updateMatrixWorld()
	cameraPosition.setFromMatrixPosition( camera.matrixWorld )

	zAxis = camera.getWorldDirection().negate()
	})()
	// </FOR TESTING ONLY>

	var viewport = window
	var viewWidth = viewport.innerWidth
	var viewHeight = viewport.innerHeight

	;(function cameraProjectDemo(){
	viewport.addEventListener( 'mousedown', startDrag, false )

	var target
	, viewClickPoint

	function startDrag(event) {
	window.addEventListener( 'mousemove', drag, false )
	window.addEventListener( 'mouseup', stopDrag, false )

	var viewPoint = getViewPoint(event)
	target = getModelUnderMouse(viewPoint)

	if (!target) {
	stopDrag()
	return
	}

	viewClickPoint = target.point.clone().project(camera)

	;(function testing(){
	dragCube.position.copy(target.point)
	scene.add(dragCube)
	var distanceToCube = target.point.clone()
	.sub(cameraPosition)
	.dot(zAxis)
	dragPlane.position.z = distanceToCube
	})()
	}

	function drag(event) {
	var viewPoint = getViewPoint(event, viewClickPoint.z)
	var worldPoint = viewPoint.clone().unproject(camera)
	dragCube.position.copy(worldPoint)
	}

	function stopDrag(event) {
	window.removeEventListener( 'mousemove', drag, false )
	window.removeEventListener( 'mouseup', stopDrag, false )
	}

	function getViewPoint(event, z) {
	var viewPoint = new THREE.Vector3()

	viewPoint.x = (event.clientX / viewWidth) * 2 - 1
	viewPoint.y = 1 - (event.clientY / viewHeight) * 2
	viewPoint.z = z \|\| 0

	return viewPoint
	}

	function getModelUnderMouse(viewPoint) {
	var raycaster = new THREE.Raycaster()

	raycaster.setFromCamera( viewPoint, camera )
	intersects = raycaster.intersectObjects(scene.children)

	return intersects[0] // may be undefined
	}
	})()
	})(scene, camera)

	;(function render() {
	renderer.render(scene, camera)
	requestAnimationFrame(render)
	})()
	}

	window.onload = init
	</script>
	</body>
	</html>