我有一个管道几何形状的场景,光线交叉工作正常.在光线交叉处,我显示一个小的红色球体和光标旁边的工具提示.请找到
现在,如果我添加带div元素的标题,则光线交集正在工作,但问题是红色球体,工具提示和鼠标光标之间存在距离.请找到
请在下面找到标题代码,工具提示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 = " Degree: "+clickedDegree+"
demo on jsfiddle
如果我添加标题,为什么鼠标光标,球体几何体和太尖端之间存在距离？
R54
最佳答案
textDiv绝对定位？也许标题只是抛弃了页面的布局和工具提示..试试这个：
textDiv.style.position = "absolute";
编辑：
好吧,实际上它是需要绝对定位的标题..否则它将移动画布并且HTML中的鼠标位置与webgl画布中的鼠标位置不匹配.
或者,如果您不希望标题位于画布顶部,则可以在计算鼠标位置时考虑容器位置.对于Vector：
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/
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
