时间戳

首页 > 解决方案 > 如何获得框架框顶点坐标？

javascript - 如何获得框架框顶点坐标？

问题描述

我需要从 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-intersected 事件，我正在管理 raycaster 端的交叉点，而不是在其他实体中。

标签： javascripthtmlthree.jsaframe

解决方案

不需要顶点坐标。raycasters intersection.point 包含一个Vector3与相交位置。

另一方面，如果你得到你的相机（光线投射器原点）位置，你会得到另一个Vector3.

从three.js 文档中，您可以通过简单的a.distanceTo(b).

在这里拉小提琴。

推荐阅读