javascript–three.js– 光线交点和球体位置

javascript–three.js– 光线交点和球体位置,第1张

概述我有一个管道几何形状的场景,光线交叉工作正常.在光线交叉处,我显示一个小的红色球体和光标旁边的工具提示.请找到现在,如果我添加带div元素的标题,则光线交集正在工作,但问题是红色球体,工具提示和鼠标光标之间存在距离.请找到请在下面找到标题代码,工具提示div,球体和碰撞检测功能:标题: <div style='margin-top:10px;ma

我有一个管道几何形状的场景,光线交叉工作正常.在光线交叉处,我显示一个小的红色球体和光标旁边的工具提示.请找到

现在,如果我添加带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 = "&nbsp;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/ 总结

以上是内存溢出为你收集整理的javascript – three.js – 光线交点和球体位置全部内容,希望文章能够帮你解决javascript – three.js – 光线交点和球体位置所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1121183.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)