如何在悬停时突出显示立方体面？三.js答案

【问题标题】：how to highlight a cube face on hover? THREE.js如何在悬停时突出显示立方体面？三.js
【发布时间】：2021-09-14 16:56:26
【问题描述】：

我正在使用 raycaster 定义立方体的面，然后像这样绘制面

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;

但是正如你所看到的，这张脸并没有完全涂上。有人可以帮忙吗？ https://jsfiddle.net/kirill321592/fjdxpos1/43/

【问题讨论】：

提示：让 geometry = new THREE.BoxGeometry(); geometry = geometry.toNonIndexed();
@WestLangley 感谢您的评论，但现在绘制的边缘被分成 2 个偶数三角形
@WestLangley 非常感谢您的帮助
每个面由两个三角形组成，所以需要设置两个三角形的颜色。 jsfiddle.net/zLt97pej。另一种方法不使用顶点颜色：mesh = new THREE.Mesh( boxGeometry, materials ); 其中materials 是一个包含 6 种材质的数组，每个面一个。
非常感谢，我该如何感谢？

标签： javascript three.js 3d raycasting

【解决方案1】：

每个面由两个三角形组成，因此您需要设置两个三角形的颜色。 jsfiddle.net/zLt97pej。另一种方法不使用顶点颜色：mesh = new THREE.Mesh(boxGeometry, materials);其中materials 是6 种材料的数组，每个面一个。 ty @WestLangle

【讨论】：