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

Question

我正在使用Aframe在场景中生成一个平面。我想在平面旋转xyz的情况下，找到平面四边上的中心点。

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>