javascript - 在 Three.js 中使用 Raycaster 重置对象的 Material 属性

Question

我已经在 Three.js 中设置了一个 raycaster，它可以工作。

以下是确定当您将鼠标悬停在场景中的对象上时会发生什么的代码:

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 做到这一点？我想设置一个 bool 值，当它没有被鼠标悬停时它变为假，但你只能在它被鼠标悬停时引用该对象。

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;
        }
    }


    // [...]
}