时间戳

首页 > 解决方案 > Three.js：更改网格颜色导致只有 1 个面受到更改的影响

javascript - Three.js：更改网格颜色导致只有 1 个面受到更改的影响

问题描述

所以我有一个 GLB 格式的模型（来自 CAD 的组件），其中包含许多部件、层次结构等。我想要完成的是在鼠标悬停时突出显示一个对象（特别是组件的一部分）。

所以这样做的主要代码是：

raycaster.setFromCamera( pointer, camera );
            
                const intersects = raycaster.intersectObjects(scene.children, true);

                if ( intersects.length > 0 ) {

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

                        if ( INTERSECTED ) INTERSECTED.material.color.set( INTERSECTED.currentColor );

                        INTERSECTED = intersects[ 0 ].object;
                        
                        INTERSECTED.currentColor = INTERSECTED.material.color.getHex();

                        INTERSECTED.material = INTERSECTED.material.clone();
                        INTERSECTED.material.color.setHex( 0xffb300 );

                    }

                } else {

                    if ( INTERSECTED ) INTERSECTED.material.color.set( INTERSECTED.currentColor );
                    INTERSECTED = null;

                }

但不幸的是，我得到的结果是只有 1 个面发生了颜色变化，其余的网格没有。我已经尝试了很多东西，但我在three.js上是个新手，所以基本上我不知道

标签： javascriptthree.jsgltf

解决方案

对于将来遇到同样问题的任何人：出于某种原因，step->glb 转换为每个对象面创建了一个独立的网格。因此，为了突出整个部分，我必须更改 object.parent.children 中每个对象的材质

推荐阅读