three.js - 射線相交和球體位置

Question

我已經與管幾何和射線相交的場景正常工作。在光線交叉處，我在光標旁邊顯示一個小紅色球體和一個工具提示。請找到

現在，如果我添加一個包含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> 

工具尖端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'; 
        } 

       } 

     } 

demo on jsfiddle

爲什麼有鼠標光標，球形幾何形狀和如果我添加報頭中的太尖之間的距離是多少？

R54

Answer 1

是對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";  

更新的jsfiddle：http://jsfiddle.net/tje8y/