I have a scenario where ray intersection is functioning properly with tube geometry. Upon ray intersection, a small red sphere and a tooltip appear next to the cursor. The image below shows the scene without a header:
When I include a header using a div element, the ray intersection still works but there is a noticeable distance between the red sphere, tooltip, and the mouse cursor. The image with the header is presented below:
Here is the code for the header, tooltip div, sphere, and collision detection function:
Header:
<div style="margin-top:10px;margin-left:3%;height:100px;width:70%">
<label style="color:#b0bb02;font-size:14pt">three.js</label>
<label style="color:#f5f7f9;font-size:14pt;font-weight:bold">Tube Geometry</label><br><br>
</div>
Tool-tip div:
textDiv = document.createElement( 'div' );
textDiv.style.position = 'absolute';
textDiv.style.top = '50px';
textDiv.style.margin = '8px';
textDiv.style.border = '1px solid blue';
textDiv.style.zIndex = '100';
textDiv.style.background = '#ffffff';
textDiv.style.display = 'block';
container.appendChild( textDiv );
Sphere geometry:
dot = new THREE.Mesh ( new THREE.SphereGeometry( 1, 12, 1 ), new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );
Collision detection:
var intersects;
function detectCollision(event){
var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1,- ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
/*var mouse_x = ((event.pageX-event.target.offsetParent.offsetLeft) / renderer.domElement.width) * 2 - 1;
var mouse_y = - ((event.pageY-event.target.offsetParent.offsetTop) / renderer.domElement.height) * 2 + 1;
var vector = new THREE.Vector3(mouse_x, mouse_y, 0.5);*/
projector.unprojectVector( vector, camera );
var ray = new THREE.Raycaster( camera.position, vector.subSelf( camera.position ).normalize() );
intersects = ray.intersectObjects( objects );
var pnt=0; var clickedMD = 0; var clickedDegree; var clickedTVD;
if ( intersects.length > 0 ) {
dot.position.copy( intersects[0].point );
scene.add( dot );
var fi = intersects[0].faceIndex;
pnt = Math.round(fi/11);
clickedMD = pathObjColl[pnt].md;
clickedTVD = Math.round(pathObjColl[pnt].point.z);
clickedDegree = degrees[Math.round(fi%11)];
// tooltip
var elem = document.getElementsByTagName("canvas");
var canvas = elem[0];
var x = event.pageX - canvas.offsetLeft ;
var y = event.pageY - canvas.offsetTop ;
//console.log("X: "+x+" Y: "+y);
textDiv.style.top = y+"px";
textDiv.style.left = x+"px";
textDiv.innerHTML = " Degree: "+clickedDegree+"<br/> MD: "+clickedMD+" ft<br/> TVD: "+clickedTVD+" ft";
if(textDiv.style.display == 'none'){
textDiv.style.display = 'block';
}
}
else if(intersects.length == 0){
var textDivVis = textDiv.style.display;
console.log(textDivVis);
if(textDivVis == 'block'){
textDiv.style.display = 'none';
}
}
}
What causes the discrepancy in the alignment between the mouse cursor, sphere, and tooltip when a header is added?