установить emissiveIntensity на изображении (или на любом материале)

Используя aframe, я хотел бы отображать плоское изображение с прозрачностью (например, как png), которое темное, когда на него нет света. Я выяснил, что параметр emissiveIntensity не распознается при использовании a-image (согласно консоли моего браузера Chrome):

<a-image src="#img-colorwheel" 
         position="8 3 -10"
         rotation="0 0 0"
         height="5" 
         width="5"
         material="emissiveIntensity:0;">
</a-image>

При использовании обычного a-entity он работает:

<a-entity geometry="primitive: plane; height:5; width:5;" 
          material="src:#img-colorwheel; emissiveIntensity:0;"
          position="0 2 -19.9"
          rotation="0 0 0">
</a-entity>

Моя проблема в том, что в этом случае прозрачная часть png отображается белым цветом. Какие-нибудь подсказки или обходные пути?

Работа с a-frame 0.7.0; та же проблема с 0.7.1


aframe
person Technotom    schedule 04.12.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

<a-image> не имеет эмиссионных сопоставлений. Вы также можете проверить это, выполнив поиск a-image в исходный код, где вы можете увидеть сопоставления.

Я бы использовал сущность, поскольку a-image явно является сокращенной версией a-entity с геометрией plane.

Если вам действительно нужен <a-image> с эмиссией, вам нужно изменить шейдер, поскольку <a-image> использует meshBasicMaterial. Проверьте его свойства. Нет эмиссионного. Что нужно сделать:

<a-image src="https://i.imgur.com/wjobVTN.jpg" 
     position="0 2 -3"
     rotation="0 0 0"
     height="5" 
     width="5"
     material = "shader:standard;color:blue;
     emissive:red;emissiveIntensity:2">
</a-image>

как я сделал здесь.

Ofc Вы можете сделать компонент, который заменяет материал на любой другой, но meshStandardMaterial должно быть достаточно.

person Piotr Adam Milewski    schedule 04.12.2017