[英]Find relative points on plane after rotation in Aframe
I am using Aframe to generate a plane in a scene.我正在使用 Aframe 在场景中生成平面。 I would like to find the center points on the 4 sides of the plane given an xyz rotation of the plane.
在给定平面的 xyz 旋转的情况下,我想找到平面 4 侧的中心点。
Are there any equations or relevant functions in Threejs or Aframe I can use to get the xyz coordinates of each corner? Threejs或Aframe中是否有任何方程式或相关函数可以用来获取每个角的xyz坐标?
Here's one approach这是一种方法
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;
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.