At the moment, my rendered model (which is grey in color) stretches across the entire width of the html page with the mesh centered within that width. I want to reduce this width but when I do so, the click event on the model seems to be misaligned. Three.js still believes that my mesh is at the center of the width even though it has actually shifted to the left due to the decreased width.
Here's an example of the code:
Currently, I have something like this where the first step involves creating a renderer that places the rendered object which takes up the full width of the screen and centers the rendered object within that width. This particular code example works perfectly:
var WIDTH = window.innerWidth;
HEIGHT = window.innerHeight/2;
// Create a renderer and add it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
I then insert the rendered image into a div on my html page.
container = document.getElementById( 'canvas' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
Next, I create a mesh and add it to an array called targetList
mesh = new THREE.Mesh(geometry, material);
mesh.position = new THREE.Vector3(0, -3, 0) ;
projector = new THREE.Projector();
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
scene.add(mesh);
targetList.push(mesh);
Whenever someone clicks on the rendered image, the following function is triggered:
function onDocumentMouseDown( event )
{
console.log("Click.");
// update the mouse variable
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// find intersections
var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
// create an array containing all objects in the scene with which the ray intersects
var intersects = ray.intersectObjects( targetList );
// if there is one (or more) intersections
if ( intersects.length > 0 )
{
console.log("Hit @ " + toString( intersects[0].point ) );
}
}
Everything works fine and accurate, giving me precise outputs when clicking inside the rendered model.
Hit @ [ -0.12506098558617107, 2.650102060480923, 1.2154427674550532 ]
The Problem Begins
However, the issue arises when I decrease the width and modify the initial statement:
var WIDTH = window.innerWidth;
to var WIDTH = window.innerWidth/2;
After making this adjustment, when I click on the image I only get a "click" output and for some reason, Three.js fails to recognize that I clicked on the model. If I click in the center (previous position of the model), Three.js thinks that the click occurred inside the model. My question is, why does reducing the width cause my model to move left on the screen affect the coordinates? Why does Three.js still believe that my model is centered?