首页 文章

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

提问于
浏览 次
0

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

enter image description here

javascript three.js 3d mesh

1 回答

  • 1

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

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

    或者有没有办法设置分段的方式，其中一个将始终具有固定的大小？

    是 . 您必须自己修改几何体 . 到达说 g.attributes.position.array 并修改构成段的顶点 . 它低于场景图并且与场景图不同 .

    可能没有充分的理由想要将所有内容保持在相同的几何体中 . 如果你使用顶点颜色来绘制不同的段，并且可能在GLSL而不是 scale.set() 中为挤出设置动画，这将是有意义的 . 但是既然你想要应用不同的材料并且没有编写GLSL，那么你最终会得到多个绘制调用 .

    实际上，您可以通过存储简单的多维数据集并引用它两次来节省一些内存，而不是存储额外的顶点和面 . 因此，您尝试做的更有可能消耗更多内存，并且具有相同数量的渲染开销 . 在这种情况下，用场景图做一切，有两个网格和 one geometry （你不需要复制框，你只需要两个 nodes ）应该是高效的，并且更容易使用 .

    回复于

相关问题