在三个js中使用鼠标悬停更改网格的颜色 [英] Change color of mesh using mouseover in three js

问题描述

我已经编写了一个使用 jsonloader 和three.js 显示多个网格的WebGL 脚本，现在我想添加MouseOver 和onClick 事件.第一个是当鼠标悬停在网格上时简单地改变网格的颜色:

I've put together a WebGL script that displays several meshes using jsonloader and three.js and I now want to add MouseOver and onClick events. The first of these is simply changing the colour of the mesh when the mouse hovers over it:

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 变体来尝试使这种效果仅在鼠标悬停在网格上时才起作用，但我无法让它工作 - 它只是保持红色.谁能建议我如何修改我的脚本?

The render function above allows me to change the colour of any mesh to red by hovering over it. I've tried several if/else variants to try and have this effect only work when the mouse is over a mesh but I can't get it to work- it just stays red. Can anyone suggest how I might amend my script?

谢谢.

推荐答案

您必须在鼠标移开时将颜色设置回原始颜色，这不会自动发生...

You have to set the color back to the original color on mouse out, that won't happen automatically...

检查 这个例子 http://stemkoski.github.io 具体更新方法:

Check this example on http://stemkoski.github.io specifically the update method:

here a fiddle with a demo 更新到最新的three.js master:

Here a fiddle with a demo updated to the latest 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;
}

这篇关于在三个js中使用鼠标悬停更改网格的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！