Find relative points on plane after rotation in Aframe

Question

I am using Aframe to generate a plane in a scene. I would like to find the center points on the 4 sides of the plane given an xyz rotation of the plane.

Are there any equations or relevant functions in Threejs or Aframe I can use to get the xyz coordinates of each corner?

Answer 1

Here's one approach

1. Store the original corner coordinates

Multiple ways to do this, in this case we can just read the vertices:

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

2. Transform the coordinates

We can get the "current" vertex coordinate by applying the transform matrix to the original coordinate:

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.

For example:

 <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>