0

我正在使用 Aframe-React 和Aframe Click Drag 组件。

这运行良好，我现在正在尝试解决如何向实体添加事件，以便在拖动我的一个实体时更新这些计算（这些线是它们之间的肘部连接 - 我想将这些更新为项目被拖动）

稍后会为实体提供 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>
  )
4

1 回答 1

0

据我所知，Kevin 的事件集组件设置了 target / self 属性（他的 non-minified 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()
     }
  }
}

像这样的东西。

于 2018-02-06T09:27:24.427 回答