Question

我需要从AFRAME中的对象（框）获取顶点，或者我需要计算raycaster和实体的面之间的交点。有人可以帮我吗？谢谢大家！ç

编辑：我在下面添加了代码。

AFRAME.registerComponent("intersection-handler", {
  schema: {
    fps: { type: 'number', default: 15 }
  },

  init: function() {
    this.bindMethods();

  },

  tick: function(){

    if(new Date().getTime()-this.lastTick<(1000/this.data.fps))return;
    if(this.isIntersecting){
      let distance = this.calculateDistance(this.el.object3D.position, this.hittedElem.object3D.position);
      this.el.emit('intersection-detected-' + this.el.id, distance );
    }else{
      this.el.emit('intersection-cleared-' + this.el.id);
    }
    this.lastTick = new Date().getTime();
  },

  bindMethods(){ // You could do all of this directly in your init() method, but I like to separate it.
    this.onIntersection = this.onIntersection.bind(this);
    this.onIntersectionClear = this.onIntersectionClear.bind(this);
  },

  play: function() {
    this.registerEventListeners();  // It's a good practice in general to enable your event listeners here.
  },

  pause: function() {
    this.deregisterEventListeners(); // Similarly a good practice to remove them here so that they don't stay bound while the scene isn't actually 'running'
  },

  registerEventListeners() {

    this.el.addEventListener('raycaster-intersection', this.onIntersection);
    this.el.addEventListener('raycaster-intersection-cleared', this.onIntersectionClear);
  },

  deregisterEventListeners() {

    this.el.removeEventListener('raycaster-intersection', this.onIntersection);
    this.el.removeEventListener('raycaster-intersection-cleared', this.onIntersectionClear);
  },

  onIntersection: function(e) {
    console.log(this.el.components.raycaster.getIntersection(e.detail.els[0]))


    this.isIntersecting = true;
    if(e.detail.intersections[0].object){
      this.hittedElem = e.detail.intersections[0].object.el;
    }
  },

  onIntersectionClear: function(e) {

    this.isIntersecting = false;
  },

  calculateDistance: function(myElposition, hittedElposition) {
    // distance = sqrt((x2 - x1)^2 + (y2 - y1)^2) - rolloff
    let rolloffFactor = 0.5;
    let d = Math.sqrt(Math.pow((hittedElposition.x - myElposition.x), 2) + Math.pow((hittedElposition.y - myElposition.y), 2)) - rolloffFactor;
    return d;
  }

});

我无法使用raycaster相交的事件，我正在raycaster侧而不是其他实体中管理交点。

Answer 1

不需要顶点坐标。 raycasters相交点包含一个Vector3，其交点位置。

另一方面，如果您将相机（光线投射仪的原点）放在正确的位置，则会得到另一个Vector3。

通过three.js docs，您可以通过简单的a.distanceTo(b)来获得它们之间的距离。

提琴here。

如何获取框框顶点坐标？

1 个答案: