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