Aframe - установка непрозрачности элемента a-sky не работает

У меня есть два перекрывающихся элемента a-sky. Второй расположен на z = -1000 (не виден камере). В этой настройке, если я установил непрозрачность первого элемента a-sky на 0,5, я должен увидеть второй элемент a-sky.

Следующий код не работает. (Необходимо, чтобы это сработало.)

skyEl.getObject3D("mesh").material= new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load("image url"),
    transparent: true,
    opacity: 0.5
});

Но этот метод работает.

skyEl.setAttribute('src','image url'); 
skyEl.getObject3D("mesh").material.transparent = true;
skyEl.getObject3D("mesh").material.opacity= 0.5;

В моем проекте я не могу установить атрибут src, потому что текстуры уже загружены, и я могу создавать материал только из предварительно загруженной текстуры. Мне нужно знать, что не так с первым методом и как это исправить. Есть ли другой параметр, который мне нужно установить?

Также пробовал использовать a-sphere вместо a-sky, но результат тот же.

ДЕМО: https://codesandbox.io/s/qx6zj247l6 (охватывает оба случая и, пожалуйста, игнорируйте все реакции и прочее для подростков.)

PS: Создание эффекта перехода сцены кроссфейд + масштабирование.


aframe webvr
person AKT    schedule 15.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Получить правильный порядок рендеринга, чтобы прозрачность работала должным образом, сложно. На странице документации по компонентам материала:

Проблемы с прозрачностью

Прозрачность и альфа-каналы сложны в 3D-графике. Если у вас возникают проблемы, при которых прозрачные материалы на переднем плане неправильно совмещаются с материалами на заднем плане, проблемы, вероятно, связаны с базовым дизайном композитора OpenGL (для которого WebGL является API).

В идеальном сценарии прозрачность в A-Frame будет «просто работать», независимо от того, где разработчик размещает объект в трехмерном пространстве или в каком порядке они определяют элементы в разметке. Мы часто можем столкнуться со сценариями, когда объекты переднего плана перекрывают объекты заднего плана. Это создает путаницу и нежелательные визуальные дефекты.

Чтобы обойти эту проблему, попробуйте изменить порядок объектов в HTML.

Чтобы решить вашу проблему, просто поместите #sky1 после #sky2 в HTML:

render() {
    return (
      <Scene>
        <Entity id="sky2-wrapper" rotation="0 90 0">
          <Entity id="sky2" primitive="a-sky" position="0 0 -1000" />
        </Entity>
        <Entity id="sky1" primitive="a-sky" opacity="1" />
        <Entity
          camera={{
            far: 10000,
            fov: 80,
            near: 0.05,
            active: true
          }}
          id="cam"
          rotation="0 90 0"
          mouse-cursor
          look-controls="reverseMouseDrag:true"
        />
      </Scene>
    );
  }

введите описание изображения здесь

person W. Murphy    schedule 15.01.2018
comment
Вау ... Спасибо. Это сработало. Забавно то, что я уже пробовал это в своем реальном проекте, и это не сработало. Оказалось, что произошла ошибка, из-за которой сцена отображалась белым. Я идиот. : / - person AKT; 15.01.2018
comment
@AKT, если ваш реальный вариант использования более сложен, альтернативой ручному упорядочиванию является позволить рендереру THREE.js попытаться выполнить автоматическую сортировку с renderer.sortObjects = true. Дополнительная информация в этом выпуске A-Frame: github.com/aframevr/aframe/issues / 666 # issuecomment-335895847 - person W. Murphy; 16.01.2018