Three.js 瓶子上贴花的可见度取决于相机角度

Question

我用 Blender 创建了一个 3D 瓶子，我打算通过 Three.js 将其嵌入到网站中。瓶子应该旋转，我可能最终会使用 OrbitControls，所以它需要从各个侧面看起来都不错。

我熟悉基础知识，其中大部分已经可以工作了。

但是我对瓶子上的“标签”有疑问。瓶子“周围”有一个网状圆柱体，用于保存贴花图像。 当相机从下面看时，贴花显示得很好。

例如使用相机设置：

position: [0, -0.45, 8],
rotation: [0.07, 0, 0],

然而，当相机从上方观察时，贴花最终出现在瓶子的“后面”。 例如使用相机设置：

position: [0, 1, 8],
rotation: [-0.11, 0, 0],

使用 OrbitalControls 上下移动相机时也可以观察到。

我在 CodeSandBox

上添加了 MWE

贴花网格距离瓶子足够远，因此 z-fight 不是问题。 我已经尝试过增加贴花网格的直径，即使使用真正大直径的贴花网格，也存在同样的问题。

我认为问题可能在于 Three.js 计算哪个项目（带有贴花的瓶子 <> 网格）更接近相机的方式，因为两个网格具有相似的中心。但我不知道如何解决它。

Answer 1

将渲染顺序属性设置为 1，现在看起来不错。

<mesh
          geometry={nodes.Print.geometry}
          position={nodes.Print.position}
          rotation={nodes.Print.rotation}
          scale={nodes.Print.scale}
          renderOrder={1}
        >
          <meshStandardMaterial
            shininess={800}
            transparent
            depthWrite={false}
            map={printDecal}
            side={THREE.FrontSide}
          />
        </mesh>