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

据我所知，凯文的event-set component设定了目标/自我属性（他的非缩小dist的第121行），这意味着它无法调用方法（update除外，每当属性发生变化时都会调用）

我自己的听众，无论是在我的组件中，还是只是一个听众 - ＆gt;呼叫者

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。

Aframe - 拖动

1 个答案: