mouse click on three.js

Question

I have a webpage with three.js (webgl) graphic on it. The graph is of type .dae and was imported from Blender. I am trying to draw a square or a mark where ever a mouse has been clicked on but for some reason, the square is drawn in a different location.. I have read various blogs but I can't figure out what I am doing wrong.. Here's my code:

<script src="three.js"></script>
        <script src="ColladaLoader.js"></script>
        <script src="TrackballControls.js"></script>
        <script>
            var dae;
            var camera;
            var renderer; 
            var loader = new THREE.ColladaLoader();             
            loader.options.convertUpAxis = true;
            loader.load( './dataFile.dae', function ( collada ) {
                dae = collada.scene;
                dae.traverse( function ( child ) {
                    if ( child instanceof THREE.SkinnedMesh ) {
                        var animation = new THREE.Animation( child, child.geometry.animation );
                        animation.play();
                    }
                } );

                dae.scale.x = dae.scale.y = dae.scale.z = 1;
                dae.updateMatrix();

                init();
                animate();

            } );

            function init() {
                container = document.getElementById( 'canvas' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 5, 1000 );
                camera.position.set( 2, 7, 3 );
                controls = new THREE.TrackballControls( camera );
                controls.rotateSpeed = 1.0;
                controls.zoomSpeed = 1.0;
                controls.panSpeed = 0.8;
                controls.noZoom = false;
                controls.noPan = false;
                controls.staticMoving = false;
                controls.dynamicDampingFactor = 0.3;
                controls.addEventListener( 'change', render );

                scene = new THREE.Scene();
                // Add the COLLADA
                scene.add( dae );

                // Lights
                scene.add( new THREE.AmbientLight( 0xcccccc ) );
                light = new THREE.PointLight(0x000000);
                light.position.set(-100, 100, 100);
                scene.add(light);

                // Renderer
                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

                // Misc
                document.addEventListener('click', onDocumentMouseClick);
                render();

            }

            function onDocumentMouseClick(event) {
                //event.preventDefault();
                var mouses = { x : 0, y : 0 };
                mouses.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / window.innerWidth ) * 2 - 1;
                mouses.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / window.innerHeight ) * 2 + 1;

                // particle
                var dotGeometry = new THREE.Geometry();
                dotGeometry.vertices.push(new THREE.Vector2( mouses.x, .5, mouses.y));
                var dotMaterial = new THREE.PointCloudMaterial( { color: 0x000000, size: 8, sizeAttenuation: false } );
                var dot = new THREE.PointCloud( dotGeometry, dotMaterial );
                scene.add( dot );

                render();

            }
        </script>

Answer 1

So I found the issue.. The problem was that the camera position and panning messed up the position of the click position.

Once I disabled panning and zoom everything worked perfectly.