I'm attempting to create a circle in the exact position where the mouse is clicked, but the circle ends up being drawn slightly off. Can anyone pinpoint what needs to be adjusted in the code below?
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 0, 1000 );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
function onDocumentMouseDown( event ) {
event.preventDefault();
if( event.which == 1) { // left mouse click
// x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
// y = - ( event.clientY / renderer.domElement.clientWidth ) * 2 + 1;
var x = event.clientX; // x coordinate of a mouse pointer
var y = event.clientY; // y coordinate of a mouse pointer
var rect = event.target.getBoundingClientRect();
x = ((x - rect.left) - window.innerWidth/2)/(window.innerWidth/2);
y = (window.innerHeight/2 - (y - rect.top))/(window.innerHeight/2);
var geometry = new THREE.CircleGeometry( 20, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0x65A8FF } );
circle = new THREE.Mesh( geometry, material );
//circle.position.x = x*window.innerWidth*1.23;
//circle.position.y = y*765;
circle.position.x = x*window.innerWidth;
circle.position.y = y*window.innerHeight;
scene.add( circle );
}
}