Three.js 纹理和高亮问题答案

【问题标题】：Three.js texturing and highlighting issueThree.js 纹理和高亮问题
【发布时间】：2015-08-28 20:28:20
【问题描述】：

我有一个立方体，当我将鼠标悬停在它上面时，我想改变它的颜色。这在我只使用一个纹理时有效，但现在我想将它推进到使用纹理数组，每个面一个纹理。

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( 0x118D08 );
    }

当我这样做时，悬停时的颜色变化不起作用，并且出现以下错误：

未捕获的类型错误：无法读取未定义的属性“setHex”[重复 13 次]

未捕获的类型错误：无法读取未定义的属性“getHex”

立方体的纹理按照我想要的方式进行，所以错误不在于那个。我认为这与 MeshFaceMaterial 没有颜色参数或其他东西有关。谁能告诉我我正在尝试做的事情是否可行或我出错的任何想法？

【问题讨论】：

所以您将MeshBasicMaterial 更改为MeshFaceMaterial？你能详细说明INTERSECTED和intersects[0]吗？请注意，后者只是按三角形索引的其他材料的容器（使用附加到Face3 实例的materialIndex）。你必须索引它。作为旁注：在循环和条件中始终使用花括号（请参阅semicolon insertion）
intersects[0] 是场景中对象数组的元素，INTERSECTED 是我的鼠标与之相交的对象以及我要更改其颜色的对象。我真的很想知道是否可以更改 MeshFaceMaterial 的颜色，我认为这些行： INTERSECTED.material.color.setHex( INTERSECTED.currentHex );正在抛出错误，因为我没有找到要更改的正确元素
A MeshFaceMaterial 本身没有颜色。它聚合设置在盒子各个面上的其他材质。尝试创建不同的材质并将它们直接设置在网格上。尽量减少你的代码并上传到jsfiddle

标签： javascript opengl-es three.js

【解决方案1】：

您必须像这样从“材料”中获取“材料数组”：

for(var p =0; p < INTERSECTED.material.materials.length; p++){
    INTERSECTED.currentHex = INTERSECTED.material.materials[p].emissive.getHex();
}

这样，您不会选择 MeshFaceMaterial，而是选择用于每个面的 MeshLambertMaterial 或 MeshBasicMaterial。如果您使用图像作为纹理，我建议您查看Three.js material texture and color 以快速回答该问题。

希望这对您有所帮助！

【讨论】：