Question

我已经在Three.js中设置了一个光线投射器，可以正常工作。

以下代码确定将鼠标悬停在场景中的对象上时发生的情况：

function onDocumentMouseMove( event ){

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

  raycaster.setFromCamera( mouse, camera );

  if (intersects.length > 0) { // if an object has been moused over

       // set object to 75% opacity
       intersects[0].object.material.opacity = 0.75;
  }

}

所有这些操作都是在用户将光标置于对象上时将对象的不透明度设置为0.75。但是，在不再将鼠标悬停在对象上之后，我想将不透明度重新设置为1。

我将如何使用raycaster做到这一点？我想设置一个布尔值，该布尔值在没有鼠标悬停后会变为false，但是您只能在将鼠标悬停在该对象上时引用该对象。

Answer 1

我建议在渲染功能中点按射线投射。

请注意onDocumentMouseMove事件中的鼠标当前位置

function onDocumentMouseMove( event ){

    event.preventDefault();

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

在render函数中进行射线投射，并将找到的对象存储在变量中。因此，如果没有进一步击中对象，您可以重置.opacity：

var intersectObject;

function render() {

    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( scene.children );

    if (intersects.length > 0) {

        if (intersectObject != intersects[ 0 ].object) {

            // reset opacity
            if (intersectObject)
                intersectObject.material.opacity = 1.0;

            // notice new object
            intersectObject = intersects[ 0 ].object;
            // set object to 75% opacity
            intersectObject.material.opacity = 0.25;
            //intersectObject.material.color.setHex( 0xff0000 );
        }
    } else {

        // reset opacity
        if (intersectObject) {
            intersectObject.material.opacity = 1.0;
            intersectObject = null;
        }
    }


    // [...]
}

在Three.js中使用Raycaster重置对象的材质属性

1 个答案: