在自定义组件中为自定义属性设置动画

Question

我正在尝试为隐藏在 gltf 模型（有很多对象）中的 material 属性制作动画。我可以找到参数并使用滴答事件对其进行动画处理，它看起来像这样

它几乎可以工作，但是用公式制作动画是一场噩梦。相反，我想用动画组件来控制它。不幸的是，直接公开参数似乎是不可能的，因为我必须使用 getObject3D.traverse() 来定位对象，然后获取参数。

相反，我创建了一个自定义属性（在模式中）并为该属性设置了动画。在更新函数中，我使用该属性来驱动隐藏参数。它应该可以工作，但我似乎无法在更新功能中得到响应。哇，我的自定义属性没有动画。

AFRAME.registerComponent('matclipplane', { // attached to gltf-model tree
      schema:{
          clipHeightA:{type: 'number', default: 0}
      },
      init: function () {
       let el = this.el;
       let comp = this;
       comp.treeModels = [];
       el.addEventListener('model-loaded', function(ev){
          let mesh = el.getObject3D('mesh'); 
          mesh.traverse(function(node){
             if (node.isMesh){
               comp.treeModels.push(node);
             }
          comp.modelLoaded = true;
         });
...
 update: function(){  
        console.log("update");  // returns nothing. no update from 
                                   animating attributes clipHeightA          
        let comp = this;
        if (comp.modelLoaded){          
          comp.treeModels[1].material.map.offset.y = 
                             this.data.clipHeightA;
        }
     }
...
AFRAME.registerComponent("click-listener", { // attached to box button
        schema:{
            dir:{type:"boolean", default: false}
        },
        init: function(){
            let el=this.el;
            let data = this.data;
            el.addEventListener("click", function(evt){
                let tree = document.querySelector('#tree');

               data.dir = !data.dir;
               if(data.dir){
                   el.setAttribute("material",'color', 'orange');
                   tree.emit("grow");
               } else {
                   el.setAttribute('material','color','#332211');
                   tree.emit('shrink');
               }
            });
        }
    });
<a-entity id="tree" gltf-model="#tree" scale="5 5 5" 
        animation__grow="property: clipHeightA; from: 0; to: 1; 
startEvents: grow; dur: 500"
        matclipplane></a-entity>

<a-entity id="button" geometry="primitive: box" material="color:orange;  
metalness: 0.5" scale="0.2 0.2 0.2" class="clickable" click-listener></a- 
entity>

<a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: 
.clickable"></a-entity>

这是正在进行的故障 https://glitch.com/~uv-reveal

点击橙色立方体应该会启动 uv 显示动画。我希望调用自定义组件属性应该触发更新事件，但更新不会登录到控制台。不确定如何在 gltf 中为参数设置动画。我是否必须直接在我的自定义组件中实现 animejs 组件？或者这可以用动画组件来完成吗？

Answer 1

根据 docs 您可以通过

设置动画属性

object3D 喜欢 animation="property: object3D.x"
组件如 animation="property: components.myComp.myProp"

我没有看到它被提及（虽然它在文档中使用）但是当你提供属性作为组件属性时它也有效：

animation__grow="property: matclipplane.clipHeightA;"

故障here。你可以看到 update 正在被调用。

tree 也是资产和组件的 id，因此 grow 在资产项目上发出。

在自定义组件中为自定义属性设置动画

animating a custom attribute in a custom component

aframe