Fatal编程技术网
  • javascript/
  • Javascript 当鼠标悬停在对象上时，鼠标光标应该改变（three.js）

Javascript 当鼠标悬停在对象上时，鼠标光标应该改变（three.js）

javascript html css three.js

Javascript 当鼠标悬停在对象上时，鼠标光标应该改变（three.js）,javascript,html,css,three.js,hover,Javascript,Html,Css,Three.js,Hover,我已经添加了一个球体和平面几何体的场景时，点击平面几何体它是链接到一个网站 现在，当鼠标悬停在平面几何体上时，“鼠标光标”应改为“鼠标指针（手）”，而不悬停时 在平面几何体上，鼠标应保持其原始样式。 我试着使用这个语句“$（'html，body'）.css（'cursor'，'pointer'）；”，但鼠标光标并没有改变 悬停，在单击平面几何图形时其将更改，并且其光标不会保留到其原始位置。 有人能帮我解决这个问题吗。我也上传了代码 <html> <head> <bo

我已经添加了一个球体和平面几何体的场景时，点击平面几何体它是链接到一个网站 现在，当鼠标悬停在平面几何体上时，“鼠标光标”应改为“鼠标指针（手）”，而不悬停时 在平面几何体上，鼠标应保持其原始样式。 我试着使用这个语句“$（'html，body'）.css（'cursor'，'pointer'）；”，但鼠标光标并没有改变 悬停，在单击平面几何图形时其将更改，并且其光标不会保留到其原始位置。 有人能帮我解决这个问题吗。我也上传了代码

<html>
<head>
<body>
<script type="text/javascript" src="jquery-1.11.3.js"></script>

<script src ="./three.js-master/build/three.js"></script>

<script src ="./three.js-master/examples/js/controls/OrbitControls.js">
</script>
<script src ="./three.js-master/examples/js/renderers/Projector.js">
</script>
<script type="text/javascript" src="math.min.js"></script>



<script type="text/javascript">


window.onload = createsphere();
function createsphere() 
{
var controls,scene,camera,renderer;
var planes = [];
var baseVector = new THREE.Vector3(0, 0, 1);
var camDir = new THREE.Vector3();
var planeLookAt = new THREE.Vector3();
function init() 
{

    var spriteResponse = [];
    spriteResponse[0] = {ID:1, x: 0, y: 0};
    spriteResponse[1] = {ID:2, x: 0, y: 0.1};
    spriteResponse[2] = {ID:3, x: 0, y: 0.5};
    spriteResponse[3] = {ID:4, x: 0.5, y: 0};
    spriteResponse[4] = {ID:5, x: 0.25, y: 0.5 };

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    //camera.position.y = 1;
    camera.position.z = 1 ;             
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer = new THREE.WebGLRenderer( {antialias:true} );
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);      
 /* ------------------------ creating the geometry of sphere------------------------------*/

    var radius = 2.5;
    var spheregeometry = new THREE.SphereGeometry(radius, 20, 20, 0, -6.283, 1, 1);
    //var texture =  THREE.ImageUtils.loadTexture ('rbi00000083.jpg');
    //texture.minFilter = THREE.NearestFilter;
    //var spherematerial = new THREE.MeshBasicMaterial({map: texture});
    var spherematerial = new THREE.MeshBasicMaterial({color: '#A9A9A9'});
    var sphere = new THREE.Mesh(spheregeometry, spherematerial); 
    scene.add(sphere);
    scene.add(camera);
    scene.autoUpdate = true;                
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.minPolarAngle = Math.PI/4;
    controls.maxPolarAngle = 3*Math.PI/4;   

    for(var i=0; i<spriteResponse.length;i++)
    {




        //var spriteAlignment = new THREE.Vector2(0,0) ;
        material_plane = new THREE.MeshBasicMaterial( {color: 0xffffff,side: THREE.DoubleSide } );
        material_plane.needsUpdate = true;
        //material.transparent=true;
        geometry_plane = new THREE.PlaneGeometry(0.3, 0.2);
        plane = new THREE.Mesh( geometry_plane, material_plane );
        plane.database_id = spriteResponse[i].ID;
        plane.LabelText   = spriteResponse[i].name;




        plane.position.set(spriteResponse[i].x,spriteResponse[i].y,-1);



        scene.add(plane);
        //plane.userData = { keepMe: true };
        planes.push(plane);
        //plane.id = cardinal.ID;
        //var direction = camera.getWorldDirection();
        camera.updateMatrixWorld();
        var vector = camera.position.clone();
        vector.applyMatrix3( camera.matrixWorld );
        plane.lookAt(vector);
        plane.userData = { URL: "http://stackoverflow.com"};
        document.addEventListener( 'mousedown', onDocumentMouseDown, false );

    }

    function onDocumentMouseDown( event ) 
    {

        //clearScene();
        event.preventDefault();

        var mouse = new THREE.Vector2();
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
        var raycaster = new THREE.Raycaster();
        raycaster.setFromCamera( mouse, camera );               
        var intersects = raycaster.intersectObjects( planes );                  

        var matched_marker = null;
        if(intersects.length != 0)
        {
            $('html,body').css('cursor','pointer');//mouse cursor change
            for ( var i = 0;  intersects.length > 0 && i < intersects.length; i++)
            {
                window.open(intersects[0].object.userData.URL);
            }
        }
        else
            $('html,body').css('cursor','cursor');//mouse cursor change
    }//onDocumentMouseDown( event )





}
function animate() 
{
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
init();
animate();


}

</script>
</body>
</head>
</html>


window.onload=createsphere（）；
函数createsphere（）
{
var控件、场景、摄影机、渲染器；
var平面=[]；
var baseVector=新的三个向量3（0,0,1）；
var camDir=new THREE.Vector3（）；
var planeLookAt=new THREE.Vector3（）；
函数init（）
{
变量spriteResponse=[]；
spriteResponse[0]={ID:1，x:0，y:0}；
spriteResponse[1]={ID:2，x:0，y:0.1}；
spriteResponse[2]={ID:3，x:0，y:0.5}；
spriteResponse[3]={ID:4，x:0.5，y:0}；
spriteResponse[4]={ID:5，x:0.25，y:0.5}；
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，0.11000）；
//摄像机位置y=1；
摄像机位置z=1；
变量宽度=window.innerWidth；
var height=window.innerHeight；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
设置大小（宽度、高度）；
document.body.appendChild（renderer.doElement）；
/*---------------------------创建球体的几何体------------------------------*/
var半径=2.5；
var球化法=新的三个球化法（半径，20,20,0，-6.283,1,1）；
//var-texture=THREE.ImageUtils.loadTexture（'rbi00000083.jpg'）；
//texture.minFilter=3.NearestFilter；
//var spherematerial=新的3.MeshBasicMaterial（{map:texture}）；
var spherematerial=新的3.MeshBasicMaterial（{颜色：'#A9A9'}）；
var sphere=新的三个网格（球面测量法、球面材料）；
场景。添加（球体）；
场景。添加（摄影机）；
scene.autoUpdate=true；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.minPolarAngle=Math.PI/4；
controls.maxPolarAngle=3*Math.PI/4；
对于（变量i=0；i 0&&i
您不能在JS中更改悬停状态，如下所述：

我认为最简单的解决方案是使用css：

body:hover {
    cursor: pointer;
}
虽然如果您选择一个特定的DOM节点来实现悬停效果会更好。

有很多方法可以做到这一点，但是为了使其简单易懂，我的示例包含了一个方法，该方法与您在问题中提供的代码格式保持一致

我在
init（）
函数中添加了一个
mousemove
事件。处理程序如下所示：

function onDocumentMouseMove(event) {

    var mouse = new THREE.Vector2();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( planes );

    if(intersects.length > 0) {
        $('html,body').css('cursor', 'pointer');
    } else {
        $('html,body').css('cursor', 'default');
    }

}
每次移动鼠标时，只需检查一个平面是否相交

这在以前不起作用的原因是，您只更改了鼠标上的光标，这不会产生所需的“悬停”效果

。请注意，我已经注释掉了任何与控件相关的代码，以使小提琴更快地工作，它不会改变解决方案

没有jQuery时：
if（intersects&&intersects.length>0）{document.body.style.cursor='pointer'}否则{document.body.style.cursor='default'}