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

Question

假设我在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，而红色区域会重新调整大小）

Answer 1

  

有什么方法可以将材料设置在网格的固定部分上？

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

  

还是有什么方法可以设置分段，使其始终保持固定大小？

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

可能没有充分的理由希望所有内容都保持相同的几何形状。如果使用例如顶点颜色来绘制不同的段，并且也许用GLSL而不是使用scale.set()来动画化拉伸，那将是有道理的。但是，由于您要使用其他材料并且不编写GLSL，因此无论如何您最终都会遇到多个绘制调用。

实际上，与仅存储简单的多维数据集并对其进行两次引用相比，实际上可以节省一些内存，而不是存储额外的顶点和面。因此，您尝试做的事情很可能会消耗更多的内存，并且具有相同的渲染开销。在这种情况下，使用场景图，具有两个网格和一个几何（您无需复制该框，只需要两个节点）来完成所有工作，就应该表现出色，并且更容易使用。