ba.js - giao điểm ray và vị trí hình cầu

Question

Tôi đã chụp cảnh với hình học ống và giao điểm ray đang hoạt động tốt. Khi giao cắt tia tôi đang hiển thị một quả cầu màu đỏ nhỏ và một tooltip bên cạnh con trỏ. Vui lòng tìm số

Bây giờ nếu tôi thêm tiêu đề có phần tử div, giao điểm tia đang hoạt động nhưng vấn đề là khoảng cách giữa hình cầu màu đỏ, chú giải công cụ và con trỏ chuột. Xin vui lòng tìm

xin vui lòng tìm thấy bên dưới mã của tiêu đề, công cụ-tip div, phạm vi và chức năng phát hiện va chạm:

Tiêu đề:

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

Hình cầu:

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

Collision phát hiện:

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

Tại sao có một khoảng cách giữa các con trỏ chuột, hình học hình cầu và một quá-tip nếu tôi thêm tiêu đề?

r54

Answer 1

Sản phẩm textDiv vị trí tuyệt đối? Có lẽ tiêu đề chỉ ném ra khỏi bố cục của trang, và các tooltip .. Hãy thử điều này:

textDiv.style.position = "absolute"; 

EDIT:

Vâng, trên thực tế đó là tiêu đề mà cần phải được hoàn toàn vị trí .. Nếu không nó sẽ di chuyển canvas và vị trí chuột của bạn trong HTML không khớp với vị trí chuột trong canvas webgl.

Ngoài ra, nếu bạn không muốn tiêu đề ở trên cùng của canvas, bạn có thể xem xét vị trí vùng chứa của mình khi tính toán vị trí chuột. Đối với Vector:

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

cho tooltip:

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

Cập nhật jsFiddle: http://jsfiddle.net/tje8y/