Блог

Я использую визуализацию в формате three.js/react-три волокна для создания простой альфа-карты с использованием цилиндра. Цилиндр использует основной материал белого цвета, который должен быть полностью непрозрачным на альфа-карте, согласно документам. Однако при применении к геометрии область, соответствующая белому цвету в маске, не является полностью непрозрачной, как показано в этом примере:

https://codesandbox.io/s/r3f-programmatic-alpha-map-f8lhi?file=/src/index.js

Настройка сцены такова:

Красная плоскость, замаскированная под цилиндр с помощью альфа — маски — ожидается, что за ней будет полностью непрозрачная белая рамка-она вообще не должна быть видна с позиции камеры по умолчанию, но это так.

У кого-нибудь есть какие-либо идеи, почему белая альфа-маска оставляет красную плоскость с ненулевой прозрачностью (т. Е. Не полностью непрозрачной)? Спасибо.

Объяснение было предоставлено @drcmda здесь: существует отображение тонов по умолчанию, применяемое react-three-fiber, в результате чего альфа-карта не отображается чисто белым цветом. Чтобы этого не произошло, отключите отображение тонов в материале геометрии альфа-карты:

       <Cylinder args={[1, 1, 1, 64]} position={[0, 0, 0]} rotation={[Math.PI / 2, 0, 0]}>
        <meshBasicMaterial attach="material" color="white" toneMapped={false} />
      </Cylinder>
 

т. е. в строке 49 кода и поля, связанного в вопросе.