web-dev-qa-db-ja.com

3つのjsでマウスオーバーを使用してメッシュの色を変更します

Jsonloaderとthree.jsを使用して複数のメッシュを表示するWebGLスクリプトをまとめました。次に、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バリアントを試してみましたが、この効果はマウスがメッシュ上にある場合にのみ機能しますが、機能させることができません。赤のままです。スクリプトを修正する方法を誰かが提案できますか？

ありがとう。

javascriptthree.jsraycasting
8
Martin Leman

マウス出力で色を元の色に戻す必要があります。これは自動的には行われません...

この例 をチェックしてください http://stemkoski.github.io 具体的には更新方法：

ここにデモのあるフィドル 最新のthree.jsマスターに更新されました：

// 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;
}
12
Wilt

上記の回答のコードは古くなっているので（試しました）... threex.domeventsライブラリ をご覧ください。私の場合はうまくいきました。

threex.domeventsは、3Dシーン内でdomイベントを提供するthree.js拡張機能です。常に通常の慣習に近づけるために、イベント名はDOMと同じです。セマンティクスも同じで、すべてを非常に簡単に学ぶことができます。現在、利用可能なイベントは、クリック、dblclick、mouseup、mousedown、mouseover、mouseoutです。

これを使用する例を次に示します。

http://bl.ocks.org/fabiovalse/2e8ae04bfce21af400e6

2
Leniel Maccaferri