Как управлять тенями сущностей детей? - PullRequest
Новая
       5

Как управлять тенями сущностей детей?

0 голосов
/ 26 апреля 2018

У меня проблемы с родительскими объектами, и я устанавливаю определенные атрибуты, такие как тени, для родительского объекта и его дочерних элементов (разные значения).Появляется событие object3Dset, всплывающее и все, что дочерний элемент (или когда любой другой дочерний элемент вызывает событие object3dset) перезаписывается родителем (так как он автоматически устанавливает для всех дочерних элементов свое значение: https://github.com/aframevr/aframe/blob/master/src/components/shadow.js).Есть ли стандартизированный способ справиться с этим поведением?

Вот пример "hello aframe" для упрощения: 

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, WebVR! - A-Frame</title>
    <meta name="description" content="Hello, WebVR! - A-Frame">
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>

      <a-entity light="type:directional; castShadow:true;" position="1 1 1"></a-entity>

      <!-- parent that shadows -->
      <a-entity shadow="cast:true; receive:true">

        <!-- children that avoid shadows -->
        <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow="cast:false; receive:false"></a-box>
        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow="cast:false; receive:false"></a-sphere>
        <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow="cast:false; receive:false"></a-cylinder>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow="cast:false; receive:false"></a-plane>
      </a-entity>

      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Shadows :( enter image description here

1 Ответ

0 голосов
/ 26 апреля 2018

Чтобы обойти эту проблему, мне пришлось переделать теневой компонент, чтобы иметь флаг для контроля, если также затрагиваются дочерние элементы.Было бы интересно узнать, есть ли лучший способ сделать это. 

AFRAME.registerComponent('custom-shadow', {
    schema: {
        cast:               {type: 'boolean',    default: true},
        receive:            {type: 'boolean',    default: true},
        applyToChildren:    {type: 'boolean',    default: true}

    },
    multiple: false, //do not allow multiple instances of this component on this entity
    init: function() {
        this.applyShadow();
        this.el.addEventListener('object3dset', this.applyShadow.bind(this));
    },
    applyShadow : function () {
        const data    = this.data;
        const mesh    = this.el.getObject3D('mesh');

        if (!mesh) return;

            mesh.traverse(function (node) {
                node.castShadow     = data.cast;
                node.receiveShadow  = data.receive;

                if (data.applyToChildren) {
                    return;
                }
            });
    },
    update: function (oldData) {
        this.applyShadow.bind(this);
    }
});
...