我已经编写了一个 WebGL 脚本,该脚本使用 jsonloader 和 Three.js 显示多个网格,现在我想添加 MouseOver 和 onClick 事件。第一个是当鼠标悬停在网格上时简单地更改网格的颜色:
function render() {
requestAnimationFrame(render);
mesh.rotation.z += 0.090;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children);
for (var i = 0; i < intersects.length; i++) {
intersects[i].object.material.color.set(0xff0000);
}
renderer.render(scene, camera);
}
上面的渲染函数允许我通过将鼠标悬停在任何网格上将其颜色更改为红色。我尝试了几种 if/else 变体来尝试让这种效果仅在鼠标位于网格上时才起作用,但我无法让它起作用 - 它只是保持红色。谁能建议我如何修改我的脚本?
Thanks.
您必须在鼠标移开时将颜色设置回原始颜色,这不会自动发生......
Check 这个例子 http://stemkoski.github.io/Three.js/Mouse-Over.html on http://stemkoski.github.io http://stemkoski.github.io具体更新方法:
这是一个演示的小提琴 https://jsfiddle.net/wilt/52ejur45/更新到最新的 Three.js master:
// create a Ray with origin at the mouse position
// and direction into the scene (camera direction)
var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
// create an array containing all objects in the scene with which the ray intersects
var intersects = ray.intersectObjects( scene.children );
// INTERSECTED = the object in the scene currently closest to the camera
// and intersected by the Ray projected from the mouse position
// if there is one (or more) intersections
if ( intersects.length > 0 )
{
// if the closest object intersected is not the currently stored intersection object
if ( intersects[ 0 ].object != INTERSECTED )
{
// restore previous intersection object (if it exists) to its original color
if ( INTERSECTED )
INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
// store reference to closest object as current intersection object
INTERSECTED = intersects[ 0 ].object;
// store color of closest object (for later restoration)
INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
// set a new color for closest object
INTERSECTED.material.color.setHex( 0xffff00 );
}
}
else // there are no intersections
{
// restore previous intersection object (if it exists) to its original color
if ( INTERSECTED )
INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
// remove previous intersection object reference
// by setting current intersection object to "nothing"
INTERSECTED = null;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)