Javascript three.js-光线交点和球体位置

我有一个带有管状几何体和光线相交的场景，效果很好。在光线相交时，我在光标旁边显示一个红色的小球体和一个工具提示。请查找没有标题的图像：

现在，如果我添加一个带有div元素的标题，那么光线交叉点可以工作，但问题是红色球体、工具提示和鼠标光标之间有一段距离。请查找标题为的图像：

请在下面找到标题、刀尖div、球体和碰撞检测功能的代码：

标题：

<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>

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 );

dot = new THREE.Mesh ( new THREE.SphereGeometry( 1, 12, 1 ), new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );

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 = "&nbsp;Degree: "+clickedDegree+"<br/>&nbsp;MD: "+clickedMD+" ft<br/>&nbsp;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'; 
                    }
                    
                }
            
        }

球体几何体：

<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>

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 );

dot = new THREE.Mesh ( new THREE.SphereGeometry( 1, 12, 1 ), new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );

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 = "&nbsp;Degree: "+clickedDegree+"<br/>&nbsp;MD: "+clickedMD+" ft<br/>&nbsp;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'; 
                    }
                    
                }
            
        }

碰撞检测：

<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>

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 );

dot = new THREE.Mesh ( new THREE.SphereGeometry( 1, 12, 1 ), new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );

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 = "&nbsp;Degree: "+clickedDegree+"<br/>&nbsp;MD: "+clickedMD+" ft<br/>&nbsp;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'; 
                    }
                    
                }
            
        }

var相交；
功能检测碰撞（事件）{
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.offsetop）/renderer.domeElement.height）*2+1；
var向量=新的三个向量3（鼠标x，鼠标y，0.5）*/
投影仪。未投影向量（向量，相机）；
var ray=new THREE.Raycaster（camera.position，vector.subSelf（camera.position.normalize（））；
相交=光线。相交对象（对象）；
var pnt=0；var clickedMD=0；var clickedDegree；var clickedTVD；
如果（intersects.length>0）{
点.position.copy（与[0]点相交）；
场景。添加（点）；
var fi=相交[0]。面索引；
pnt=数学四舍五入（fi/11）；
单击edmd=pathbjcoll[pnt].md；
单击EDTvd=Math.round（pathbjcoll[pnt].point.z）；
单击度=度[数学圆（fi%11）]；
//工具提示
var elem=document.getElementsByTagName（“画布”）；
var canvas=elem[0]；
var x=event.pageX-canvas.offsetLeft；
var y=event.pageY-canvas.offsetTop；
//控制台日志（“X:+X+”Y:+Y）；
textDiv.style.top=y+“px”；
textDiv.style.left=x+“px”；
textDiv.innerHTML=“度：”+点击度+”
MD:“+clickedMD+”ft
TVD:“+clickeddvd+”ft”；
如果（textDiv.style.display=='none'）{
textDiv.style.display='block'；
}
}
else if（intersects.length==0）{
var textDivVis=textDiv.style.display；
console.log（textDivVis）；
如果（textDivVis=='block'）{
textDiv.style.display='none'；
}
}
}

---

如果我添加标题，为什么鼠标光标、球体几何体和太尖之间会有距离？

textDiv是否绝对定位？也许页眉会使页面的布局和工具提示发生变化。。试试这个：

textDiv.style.position = "absolute";

编辑：

事实上，需要绝对定位的是标题。。否则，它将移动画布，并且HTML中的鼠标位置与webgl画布中的鼠标位置不匹配

或者，如果不希望标题位于画布顶部，则可以在计算鼠标位置时考虑容器位置。对于向量：

       var vector = new THREE.Vector3( 
                ( (event.pageX - container.offsetLeft) / window.innerWidth ) * 2 - 1, 
                - ( (event.pageY - container.offsetTop) / window.innerHeight ) * 2 + 1, 
                0.5 );

对于工具提示：

                textDiv.style.top = (container.offsetTop + y)+"px";
                textDiv.style.left = (container.offsetLeft + x)+"px";       

---

更新的JSFIDLE:

是textDiv被绝对定位。我已经添加了textDiv的代码。-@yakuYes我已经从中解决了它。非常感谢。-@yakuI已经更新了。