在 Three.js 中将材质设置为网格的固定部分答案

【问题标题】：Set material to a fixed part of mesh in Three.js在 Three.js 中将材质设置为网格的固定部分
【发布时间】：2019-03-16 19:04:17
【问题描述】：

假设我在 three.js 中有一个 3DObject：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);

这个网格也是动态的，也就是说，用户设置它的大小，动态设置为网格的scale。

widthInput.subscribe(value => this.mesh.scale.x = +value); // just to get the idea

所以，我知道可以将单独的材质设置到几何体的不同侧面。我也知道应该可以将它设置在该几何体侧面的单独段上（如果我有更多的话）。

问题是用户可以在 200 - 260 范围内设置宽度，但我需要在网格的最右侧使用不同的材料，固定尺寸为 10。我不太确定该怎么做无需创建另一个几何图形。有什么方法可以在网格的固定部分设置材质吗？还是有什么方法可以设置分段，使其中的一个始终具有固定大小？提前谢谢你。

可视化问题（白色区域需要固定宽度为 10，而红色区域调整大小）

【问题讨论】：

出于好奇，您为什么回避创建新几何？如果将不同的材质应用到不同的面，无论如何都会导致更多的绘制调用和 webgl 调用发生。如果您创建两个框，您将拥有一个非常高级的用户友好界面。如果您在几何级别处理此问题，则会增加更多复杂性。您如何管理细分市场的位置？您要修改顶点并更新网格吗？这将违背您的scale.set() 界面。
@pailhead 你是对的，可能。我只是从整个 3d 的 javascript 世界开始，没有太多知识。我想我创建多个几何图形的问题在于太多的对象，例如当用户设置宽度时我需要更新（位置和比例）。我的意思是，我可能会创建第二个 3DObject，但和你一样......出于好奇，我想知道是否有可能实现 :)
在下面查看我的答案

标签： javascript three.js 3d mesh

【解决方案1】：

有没有办法在网格的固定部分设置材质？

正如您已经提到的，有一种方法可以在几何图形的不同部分设置不同的材质。这里的问题是定义 fixed 的含义：

或者有什么方法可以设置分段，使其中的一个始终具有固定大小？

是的。您必须自己修改几何图形。进入说g.attributes.position.array 并修改构成段的顶点。它的级别较低，与场景图不同。

希望将所有内容保持在相同的几何图形中可能没有充分的理由。例如，如果您使用顶点颜色来绘制不同的段，并且可能在 GLSL 中而不是使用scale.set() 为挤压设置动画，那将是有意义的。但是由于您想应用不同的材料而不是编写 GLSL，因此无论如何您最终都会遇到多个绘图调用。

您实际上可以通过仅存储简单立方体并引用它两次来节省一点内存，而不是存储额外的顶点和面。因此，您尝试做的事情更有可能消耗更多内存，并具有相同数量的渲染开销。在这种情况下，使用场景图进行所有操作，使用两个网格和 一个几何体（您不需要复制框，您只需要两个节点）应该同样高效，并且更容易使用。

【讨论】：

谢谢，解释得很好。我将使用我将分组的多个对象以便于扩展和定位。这是一个好方法吗？
没错，没有过早的优化 :) 场景图 (Mesh) 友好且方便。你可以在position.set() 和scale.set() 上做简单的数学运算。如果您最终拥有数千个这样的材料，则需要重新访问，但在这种情况下，将多个材料分配给同一几何体实际上不是有效的路径。但这是另一个问题的材料
如果您有多个这样的，每个都必须有独特的几何形状，以便您独立修改它们的顶点。这也不是一个好方法。但是你会合并两个绘图调用（固定部分和动态部分）。如果您制作单个几何图形并为其分配一些顶点属性。简单示例 - 顶点颜色，您可以将红色分配给动态部分，将蓝色分配给固定部分。在着色器中，您将传递您自己的缩放制服，它会拉伸红色顶点并仅偏移蓝色。然后，您可以实例化它以进一步优化。
好吧，就我而言，我只是在创建一个“衣柜创建工作室”，所以我可能有大约 40-50 个网格和一个地板，也许还有一些“房间空间模拟”（2- 3 面墙 -> 网格）。虽然，我用自己的几何体创建了它们中的每一个，但我现在根本没有意识到任何低性能。
再次感谢您花时间解释。现在我明白了，将这些材料放在一个几何体上对我来说真的不值得。