将 material 设置为 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

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

问题是用户可以在 200 - 260 范围内设置宽度，但我需要在网格的最右边设置一个不同的 material，固定大小为 10。我不是真的很确定如果不创建另一个几何体我将如何做到这一点。有什么方法可以在网格的固定部分设置 material 吗？还是有什么方法可以按照其中一个始终具有固定大小的方式来设置段？提前谢谢你。

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

Answer 1

Is there any way to set the material on the fixed part of the mesh?

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

or is there any way to set the segments the way one of them will always have the fixed size?

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

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

与存储额外的顶点和面相比，仅存储简单的立方体并引用它两次实际上可以节省一些内存。所以你想要做的是更有可能消耗更多的内存，并且有相同数量的渲染开销。在这种情况下，用场景图做所有事情，有两个网格和 一个几何体 （你不需要复制盒子，你只需要两个节点 ) 应该同样高效，并且更容易使用。

将 material 设置为 Three.js 中网格的固定部分

Set material to a fixed part of mesh in Three.js

javascript

3d

mesh

three.js