I've a scene with tube geometry and ray intersection is working fine. Upon ray intersection I am showing a small red color sphere and a tooltip next to the cursor. Please find the
Now if I add a header with div element, the ray intersection is working but the issue is there is a distance between red sphere, tooltip and a mouse cursor. Please find the
Please find below the code of header, tool-tip div, sphere and collision detection fuction:Header:\[code\] <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>\[/code\]Tool-tip div:\[code\]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 );\[/code\]Sphere geometry:\[code\]dot = new THREE.Mesh ( new THREE.SphereGeometry( 1, 12, 1 ), new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );\[/code\]Collision detection:\[code\]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'; } } }\[/code\]demo on jsfiddleWhy there is a distance between the mouse cursor, sphere geometry and a too-tip if I add header ?r54