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

Question

我正在使用 Aframe 在场景中生成平面。 在给定平面的 xyz 旋转的情况下，我想找到平面 4 侧的中心点。

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

Answer 1

这是一种方法

1. 存储原始角坐标

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

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

2. 变换坐标

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

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>