当鼠标悬停（悬停）在对象上时，鼠标光标应该改变（three.js）
Posted
技术标签:
【中文标题】当鼠标悬停（悬停）在对象上时，鼠标光标应该改变（three.js）【英文标题】：When mouseover (hover) on object the mouse cursor should change ( three.js) 【发布时间】：2017-08-14 11:45:47 【问题描述】：我在场景中添加了一个球体和平面几何体，当单击平面几何体时，它链接到一个网站 现在，当悬停在平面几何上时，“鼠标光标”应更改为“鼠标指针（手）”，并且当未悬停时 在平面几何上，鼠标应保留其原始样式。 我尝试使用这个语句 "$('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://***.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>
【问题讨论】：
【参考方案1】：您无法在 JS 中更改悬停状态，如下所述：
https://***.com/a/11371599/5001964
我认为最简单的解决方案是使用 css：
body:hover
cursor: pointer;
虽然body你选择一个特定的DOM节点来制作悬停效果会更好。
【讨论】：
【参考方案2】：有很多方法可以做到这一点，但为了保持简单并让您更容易理解，我的示例包含一个与您在问题中提供的代码格式保持一致的方法。
我在init() function中添加了一个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');
所有这一切都是在您每次移动鼠标时检查您的一个平面是否相交。
这之前不起作用的原因是因为您只在鼠标按下时更改了光标，这不会产生所需的“悬停”效果。
Here's a working fiddle。请注意，我已注释掉任何与控件相关的代码以使小提琴更快地工作，它不会改变解决方案。
【讨论】：
没有jQuery：if (intersects && intersects.length > 0) document.body.style.cursor = 'pointer' else document.body.style.cursor = 'default' span>
以上是关于当鼠标悬停（悬停）在对象上时，鼠标光标应该改变（three.js）的主要内容，如果未能解决你的问题，请参考以下文章
当用户将鼠标悬停在 TreeView 控件的特定 TreeNode 控件上时显示不同的光标