更改网格面的材质或颜色 [英] Change material or color in mesh face

问题描述

我有一个 Three.Geometry 对象，它由许多顶点和面(网格)组成.我想动态更改所选面的颜色或材质.

geometry.colorsNeedUpdate = true;几何.faces[1].color.setHex(0xcccccc);//这不起作用

以上代码使新的颜色不透明度变得奇怪.它的行为就像它不会替换颜色而是将新颜色与旧颜色混合.因此，用浅色覆盖较深的颜色是不可能的.如何解决这个问题?我的材料确实适用:

mat = new THREE.MeshBasicMaterial({color:"white",shading: THREE.FlatShading,side: THREE.DoubleSide,vertexColors: THREE.FaceColors, needsUpdate : true});

我想做的另一种方法是更改​​对其他材料的引用:

geometry.faces[0].materialIndex = 1;//仅在浏览器中禁用 OpenGL 时有效

已经设置 material.needsUpdate 标志为真并检查了 https://github.com/mrdoob/three.js/wiki/Updates

还是没有变化.

解决方案

您正在混合苹果和橙子.不要同时使用面部颜色和MeshFaceMaterial.

首先，在 WebGLRenderer 中，在网格渲染一次后，您不能更改面 materialIndex.但是，您可以更改材料阵列中的一种材料.

您需要为网格材质使用 MeshBasicMaterial，并指定 vertexColors: THREE.FaceColors.这样你就可以控制每个脸的颜色.确保为每个面部颜色打上首字母，以便获得棋盘格图案.还要将材质颜色设置为0xffffff，否则您将看到您试图避免的乘法效果.

three.js r.58

I have Three.Geometry object consisting of many vertexes and faces (grid). I want to dynamically change the color or material of selected face.

geometry.colorsNeedUpdate = true; 
geometry.faces[1].color.setHex(0xcccccc);   //this doesn't work

Above code makes new color opacity weird. It behaves like it doesn't replace the color but blends new color with old. Therefore overwriting darker color with ligher is imposible. How to fix this ? My materials do apply :

mat = new THREE.MeshBasicMaterial({color:"white",shading: THREE.FlatShading,side: THREE.DoubleSide,vertexColors: THREE.FaceColors, needsUpdate : true});

Another approach i wanted to do is also with changing the reference to other material:

geometry.faces[0].materialIndex = 1; // works only when disabled OpenGL in browser

Already set material.needsUpdate flag to true and checked https://github.com/mrdoob/three.js/wiki/Updates

still no change.

解决方案

You are mixing apples and oranges. Do not use both face colors and MeshFaceMaterial simultaneously.

First of all, in WebGLRenderer, you can't change the face materialIndex after the mesh has been rendered once. You can change one of the materials in the material array, however.

You need to use MeshBasicMaterial for your mesh material, and specify vertexColors: THREE.FaceColors. That way you can control each face color. Be sure to initial each face color so you get the checkerboard pattern. Also set the material color to 0xffffff, otherwise you will see the multiplicative effect you are trying to avoid.

three.js r.58

这篇关于更改网格面的材质或颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！