在Aframe中旋转后在平面上查找相对点答案

【问题标题】：Find relative points on plane after rotation in Aframe在Aframe中旋转后在平面上查找相对点
【发布时间】：2021-04-20 23:35:25
【问题描述】：

我正在使用 Aframe 在场景中生成平面。给定平面的 xyz 旋转，我想在平面的 4 条边上找到中心点。

Threejs 或 Aframe 中是否有任何方程式或相关函数可以用来获取每个角的 xyz 坐标？

【问题讨论】：

标签： javascript three.js aframe

【解决方案1】：

这是一种方法

存储原始角坐标

有多种方法可以做到这一点，在这种情况下，我们可以只读取顶点：

const mesh = this.el.getObject3D("mesh") 
// _vertices is a Float32Array containing the coords
const _vertices = mesh.geometry.attributes.position.array;

变换坐标

我们可以通过将变换矩阵应用于原始坐标来获得“当前”顶点坐标：

const mesh = this.el.getObject3D("mesh");
const mtx = mesh.worldMatrix;
const vec = new THREE.Vector3(x, y, z);
vec.applyMatrix4(mtx);
// now vec contains the x,y,z coordinates transformed by the matrix.

例如：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("track-position", {
    init: function() {
      // vector for later calculations
      this.tmpV = new THREE.Vector3();
      // <p> element to print output
      this.textEl = document.querySelector("p")
    },
    tick: function() {
      const mesh = this.el.getObject3D("mesh") // grab the mesh
      // grab the vertices from the buffer geometry
      const verticesArr = mesh.geometry.attributes.position.array;
      // get the world transform matrix
      const mtx = mesh.matrixWorld;

      var text = "vertices:<br>"
      for (var i = 0; i < 4; i++) {
        // fill the vector from the vertices array
        this.tmpV.fromArray(verticesArr, i * 3);
        // apply the transform matrix to the vector
        this.tmpV.applyMatrix4(mtx)

        // use the data
        text += "x: " + this.tmpV.x.toFixed(2) + " , y: " + this.tmpV.y.toFixed(2) + " , z: " + this.tmpV.z.toFixed(2) + "<br>"
      }
      this.textEl.innerHTML = text;

    }
  })
</script>
<p style="position: fixed; z-index: 99">
  Hi
</p>
<a-scene>
  <a-plane position="0 0 -4" rotation="45 0 0" track-position width="4" height="4" color="#7BC8A4" material="side: double" animation="property: rotation; to: 405 0 0; loop: true; easing: linear; dur: 5000"></a-plane>
</a-scene>

【讨论】：