javascript - 单个网格上的多种 Material 会导致 z 索引/剪切问题

Question

我正在使用 Threejs，目前正在尝试将两种 Material 添加到网格中。第一种 Material 具有颜色，第二种 Material 具有 Canvas 纹理。为此，我将两种 Material 添加到一个数组中，然后将网格的 Material 设置为该数组。除了网格顶部有一个看起来像 z-index overlapping problem 的小故障阴影之外，这个效果很好。

正在创建的两种 Material 的简化代码，其中一种使用 Canvas 纹理作为其贴图。然后将两种 Material 添加到数组中，然后添加到网格中。

const canvasTexture = new THREE.CanvasTexture(
    ctx.canvas,
    THREE.UVMapping,
    THREE.LinearFilter,
    THREE.LinearMipMapLinearFilter,
    THREE.RGBAFormat,
    THREE.UnsignedByteType,
    maxAnisotropy

);

const baseMaterial = new THREE.MeshLambertMaterial({
    color: #ffff00
});

const designMaterial = new THREE.MeshLambertMaterial({
    map: canvasTexture,
    transparent: true
});

const materials = [baseMaterial, designMaterial];

myObject.material = materials;

所以我的问题是，如何设置数组中 Material 的 z 索引，这样我就不会出现故障阴影？或者我可以采取其他措施来防止这种情况发生？

Answer 1

我自己找到了答案。

不知道为什么会出现此代码，但是当我的对象在场景中旋转时，照明位置就会更新:

scene.lights.position.set(this.scene['camera'].position.x, this.scene['camera'].position.y, this.scene['camera'].position.z);

这导致我正在编辑的网格后面的网格被剪掉。我仍然需要删除被剪裁的网格，但同时不改变灯光位置已经解决了问题。

希望这能够帮助遇到类似问题的人。