Lightnet/gist:8fb3d4a7c5f3ed2b3865bf894aecb9b8

## gistfile1.txt
<html>
    <head>
        <title>voxel paint app</title>
        <!--
        <script src="/socket.io/socket.io.js"></script>
        -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
        <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
    </head>
    <body>
      <script>
AFRAME.registerComponent('rayplane', {
    init: function () {
      var sceneEl = this.el;
      var point = document.querySelector('#point').object3D;
      //var camera = document.querySelector('[camera]');
      var camera = document.querySelector('a-camera');
      console.log(camera);

      console.log(camera.object3D);
      //console.log(camera.elements);
      //var raycaster = new THREE.Raycaster();
        window.addEventListener( 'mousemove',function ( event ) {
          let vector = new THREE.Vector3(
            ( event.clientX / window.innerWidth ) * 2 - 1,
            - ( event.clientY / window.innerHeight ) * 2 + 1,
            0.5 );//.unproject( camera );

            vector.unproject( camera );
            var dir = vector.sub( camera.position ).normalize();
            var distance = - camera.position.z / dir.z;
            console.log(distance);
            let pos = new THREE.Vector3(camera.position.x,camera.position.y,camera.position.z).add( dir.multiplyScalar( distance ) );
            //console.log(pos);
            if(pos !=null){
                point.position.x = pos.x;
                point.position.y = pos.y;
                point.position.z = pos.z;
            }
        });
    },
    tick: function (time, delta) {}
});
      </script>
      <a-scene>
        <a-assets>
        </a-assets>
        <a-camera position="0 0 5" rayplane>
        </a-camera>
        <a-entity id="box" cursor-listener geometry="primitive: box" position="0 0 0" material="color: blue"></a-entity>
        <a-entity id="point" geometry="primitive: box" position="0 0 0" material="color: green"></a-entity>
      </a-scene>
    </body>
</html>
	<html>
	<head>
	<title>voxel paint app</title>
	<!--
	<script src="/socket.io/socket.io.js"></script>
	-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
	<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
	</head>
	<body>
	<script>
	AFRAME.registerComponent('rayplane', {
	init: function () {
	var sceneEl = this.el;
	var point = document.querySelector('#point').object3D;
	//var camera = document.querySelector('[camera]');
	var camera = document.querySelector('a-camera');
	console.log(camera);

	console.log(camera.object3D);
	//console.log(camera.elements);
	//var raycaster = new THREE.Raycaster();
	window.addEventListener( 'mousemove',function ( event ) {
	let vector = new THREE.Vector3(
	( event.clientX / window.innerWidth ) * 2 - 1,
	- ( event.clientY / window.innerHeight ) * 2 + 1,
	0.5 );//.unproject( camera );

	vector.unproject( camera );
	var dir = vector.sub( camera.position ).normalize();
	var distance = - camera.position.z / dir.z;
	console.log(distance);
	let pos = new THREE.Vector3(camera.position.x,camera.position.y,camera.position.z).add( dir.multiplyScalar( distance ) );
	//console.log(pos);
	if(pos !=null){
	point.position.x = pos.x;
	point.position.y = pos.y;
	point.position.z = pos.z;
	}
	});
	},
	tick: function (time, delta) {}
	});
	</script>
	<a-scene>
	<a-assets>
	</a-assets>
	<a-camera position="0 0 5" rayplane>
	</a-camera>
	<a-entity id="box" cursor-listener geometry="primitive: box" position="0 0 0" material="color: blue"></a-entity>
	<a-entity id="point" geometry="primitive: box" position="0 0 0" material="color: green"></a-entity>
	</a-scene>
	</body>
	</html>