# How to highlight a cube face on hover? THREE.js

**URL:** <https://discourse.threejs.org/t/how-to-highlight-a-cube-face-on-hover-three-js/27775>\
**Category:** Questions\
**Tags:** vertex-colors, geometry\
**Created:** [July 4, 2021, 4:29pm UTC](https://discourse.threejs.org/t/how-to-highlight-a-cube-face-on-hover-three-js/27775 "2021-07-04T16:29:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirill321592](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kirill321592/32/20381_2.png) [@kirill321592](https://discourse.threejs.org/u/kirill321592)\
**Post date:** [July 4, 2021, 4:29pm UTC](https://discourse.threejs.org/t/how-to-highlight-a-cube-face-on-hover-three-js/27775/1 "2021-07-04T16:29:55Z")

</div>

I am using raycaster to define the face of a cube and then paint the face like this

```javascript
const colorAttribute = intersected.object.geometry.getAttribute('color');
colorAttribute.setXYZ(face.a, color.r, color.g, color.b);
colorAttribute.setXYZ(face.b, color.r, color.g, color.b);
colorAttribute.setXYZ(face.c, color.r, color.g, color.b);
colorAttribute.needsUpdate = true;

```

But as you can see, the face is not completely painted over. Can someone help? [https://jsfiddle.net/kirill321592/fjdxpos1/43/](https://jsfiddle.net/kirill321592/fjdxpos1/43/)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 4, 2021, 4:34pm UTC](https://discourse.threejs.org/t/how-to-highlight-a-cube-face-on-hover-three-js/27775/2 "2021-07-04T16:34:19Z")

</div>

A box geometry is indexed by default so highlighting individual faces via vertex colors does not work. You can easily fix this by converting the geometry to non-indexed via [BufferGeometry.toNonIndexed()](https://threejs.org/docs/index.html?q=bufferge#api/en/core/BufferGeometry.toNonIndexed).

Updated fiddle: [https://jsfiddle.net/nkmqt3p2/](https://jsfiddle.net/nkmqt3p2/)

---

<div class="post-metadata">

**Author:** ![kirill321592](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kirill321592/32/20381_2.png) [@kirill321592](https://discourse.threejs.org/u/kirill321592)\
**Post date:** [July 4, 2021, 5:02pm UTC](https://discourse.threejs.org/t/how-to-highlight-a-cube-face-on-hover-three-js/27775/3 "2021-07-04T17:02:06Z")

</div>

thanks for the comment, but now the painted face is divided into 2 even triangles, i would like the whole square edge to be covered. Do I need also to define a neighboring triangle somehow?

---

<div class="post-metadata">

**Author:** ![kirill321592](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kirill321592/32/20381_2.png) [@kirill321592](https://discourse.threejs.org/u/kirill321592)\
**Post date:** [July 4, 2021, 6:11pm UTC](https://discourse.threejs.org/t/how-to-highlight-a-cube-face-on-hover-three-js/27775/4 "2021-07-04T18:11:48Z")

</div>

Finally found out solution [https://jsfiddle.net/zLt97pej/](https://jsfiddle.net/zLt97pej/)