Search code examples
reactjsthree.js3dreact-three-fiber

Visibility of decal on three.js bottle is dependent on camera angle

I created a 3D bottle with Blender that I intend to embed in a website via three.js. The bottle is supposed to rotate and I might end up using the OrbitControls, so it needs to look okay from all sides.

I'm familiar with the basics and most of it already works.

However I have trouble with the "label" on the bottle. There is a mesh cylinder "around" the bottle that holds the decal image. The decal shows fine when the camera is looking at it from below.

e.g. with camera settings:

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

decal visible

However when the camera looks on it from above, the decal ends up "behind" the bottle. e.g. with camera settings:

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

decal hidden

It also observable when moving the camera up and down with the OrbitalControls.

I added a MWE on CodeSandBox

The decal mesh is far enough from the bottle so that z-fighting isn't the issue. I already tried to increase the diameter of the decal mesh, and even with a real big diameter of the decal mesh, there is the same problem.

I think the problem might be the way three.js calculates which item (bottle <> mesh with decal) is closer to the camera, since both meshes have a similar center. But I cannot figure about how to fix it.

Solution

  • Set render order property to 1, looks fine now.

    <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>