三.js |着色相交网格重新着色每个网格答案

【问题标题】：three.js | coloring intersected mesh recolors every mesh三.js |着色相交网格重新着色每个网格
【发布时间】：2021-11-05 13:53:35
【问题描述】：

当鼠标悬停在网格上时，我尝试重新着色网格。但由于某种原因，它不能正常工作，而不是只给一个红色，每个网格都被填充了。

调试相交时，只打印出一个元素。

我在角度/打字稿环境中使用“三”：“^0.132.2”。

function render() {
    raycaster.setFromCamera( mouse, camera );
    const intersects = raycaster.intersectObjects( scene.children, false );
    if (intersects[0]) {
        console.log(intersects[0].object.id, (scene.getObjectById(intersects[0].object.id) as THREE.Mesh));
        // @ts-ignore
        (scene.getObjectById(intersects[0].object.id) as THREE.Mesh).material.color.set('#f00');
    }
    renderer.render( scene, camera );
}

【问题讨论】：

标签： typescript three.js

【解决方案1】：

如果可以的话，为多个网格重复使用相同的材质是很常见的（出于性能原因也是首选）。在这种情况下，您可能正在修改共享材料。

解决此问题的一种方法是保留一个单独的材质以在您想要突出显示的任何网格上使用，在完成突出显示后将其交换回来。

【讨论】：

非常感谢，情况确实如此，您的提示为我解决了问题??