Aframe -用于拖动的事件

Question

我使用的是Aframe-React和Aframe Click Drag component。

这工作得很好，我现在正在尝试如何将事件添加到实体中，这样当我的一个实体被拖动时，我可以更新这些计算(这些线是它们之间的弯头连接-我想在拖动项目时更新这些计算)

这些实体稍后会被赋予Click Drag属性，不过我认为最好在这里添加侦听器。

该库提供了一个事件示例

https://github.com/jesstelford/aframe-click-drag-component/blob/master/examples/events/index.html

并将这些事件注册为此类事件

  event-set__1="_event: dragstart; material.opacity: 0.2" 

但是，我似乎不知道如何在这个类中使调用成为一个函数，

也就是说，类似于

event-set__1="_event: dragstart“应调用dragStart()函数。

有关于如何做到这一点的线索吗？

const scalar = 0.2
const offsetX = 4
const offsetY = 4.5

config.scale = {x: scalar, y: scalar, z: scalar}

if (editingHotspot.shape) {

  buttonConfig.position = {
    x: config.position.x + offsetX,
    y: config.position.y + offsetY,
    z: config.position.z,
  }

  const shapeTop = {
    x: config.position.x,
    y: config.position.y + 1.9,
    z: config.position.z,
  }

  const buttonEdge = {
    x: buttonConfig.position.x - geometry.width * 0.5 * scalar,
    y: buttonConfig.position.y,
    z: buttonConfig.position.z,
  }

  const join = {
    x: shapeTop.x,
    y: buttonEdge.y,
    z: (shapeTop.z + buttonEdge.z) / 2,
  }

  lineX = {
    lineWidth: 10,
    path: AFRAME.utils.coordinates.stringify(buttonEdge) + ',' + AFRAME.utils.coordinates.stringify(join),
    color: '#fff',
  }
  lineY = {
    lineWidth: 10,
    path: AFRAME.utils.coordinates.stringify(shapeTop) + ',' + AFRAME.utils.coordinates.stringify(join),
    color: '#fff',
      }
    }
  }

  let dragStart = (e) => {
    console.log(e)
  }

  let params = {
    'hotspots-button': 'text:' + (button.label != null ? button.label : '') + ';' + 'icon:' + (button.icon != null ? button.icon.preview : '') + ';',
    draw: 'width:256; height:' + (button.icon != null ? '256' : '128') + ';',
  }

  return (
    <Entity className='hotspot button' {...params} >
      <Entity
        className='hotspot button'
        primitive='a-image'
        look-at='[camera]'
        {...{geometry}}
        scale={config.scale}
        position={editingHotspot.shape ? buttonConfig.position : config.position}
      />
      {
        editingHotspot.shape &&
          <Entity>
            <Shape config={config} editingHotspot={editingHotspot}/>
            <Entity meshline={lineX}/>
            <Entity meshline={lineY}/>
          </Entity>
      }

    </Entity>
  )

Answer 1

据我所知，Kevin的event-set component设置了目标/自我属性(他的非最小化dist的第121行)，这意味着它不能调用方法(除了update，只要属性发生变化就会调用它)

我会在我的组件中创建自己的监听器，或者仅仅是一个监听器->调用者

AFRAME.registerComponent("listener", {
  init: function() {
     this.el.addEventListener("startDrag", (e)=> {
        // call your function here.
        // if you want to call another component's function, you can do
        // this.el.components.componentWithMethod.method()
     }
  }
}

就像this一样。