Currently, I am utilizing Aframe to create a plane within a virtual scene. My goal is to determine the central points on all 4 sides of the plane based on its xyz rotation.
Is there any specific equation or function within Threejs or Aframe that can assist me in obtaining the xyz coordinates for each corner?
Here is a suggested method
There are various ways to accomplish this, but in this scenario we can simply extract the vertices:
const mesh = this.el.getObject3D("mesh")
// _vertices stores the original coordinates
const _vertices = mesh.geometry.attributes.position.array;
We can find the "current" vertex coordinate by using the transformation matrix on the original coordinate:
const mesh = this.el.getObject3D("mesh");
const mtx = mesh.worldMatrix;
const vec = new THREE.Vector3(x, y, z);
vec.applyMatrix4(mtx);
// vec now holds the transformed x,y,z coordinates.
For instance:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent("track-position", {
init: function() {
// vector for future calculations
this.tmpV = new THREE.Vector3();
// <p> element for displaying output
this.textEl = document.querySelector("p")
},
tick: function() {
const mesh = this.el.getObject3D("mesh") // retrieve the mesh
// get the vertices from the buffer geometry
const verticesArr = mesh.geometry.attributes.position.array;
// obtain the world transform matrix
const mtx = mesh.matrixWorld;
var text = "vertices:<br>"
for (var i = 0; i < 4; i++) {
// populate the vector from the vertices array
this.tmpV.fromArray(verticesArr, i * 3);
// apply the transform matrix to the vector
this.tmpV.applyMatrix4(mtx)
// utilize 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">
Hello
</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>I am attempting to utilize Array.prototype.some() within my React component to check if a particular value exists in my array of objects. However, I keep encountering the error message data.some(...) is not a function. Interestingly, Array.prototype.map() ...
`webix.ready(function(){ grid = webix.ui({ container:"tracker", editaction:"click", editable:true, view:"datatable", css:"webix_header_border", leftSplit:1, ...
Having trouble displaying an alert when clicking on a disabled button because the user needs to first click on a terms checkbox. Here's my jQuery code: $('#divButton').on("click", function() { if ($('#buybutton').prop('d ...
Let me explain this clearly. Currently, I have a table displaying in HTML when called. However, I want the table to disappear and show filtered results when someone enters a president's name and clicks on "Search for Presidents". I attempted using a c ...
My current goal involves creating a tube following a specific path, and that's where the TubeGeometry object comes into play. However, there is a slight complication - I need the radius of the tube to change at different points along the path. Essenti ...
Trying to access the string in section1.text, but my console is showing: https://i.stack.imgur.com/ox8VD.png Here's the JSX code I'm using: return ( <div> <h1>{this.props.article.title}</h1> ...
I'm encountering an error while trying to incorporate code from Material UI. The error message is: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. Mismatc ...
A photo gallery consists of a collection of photos with corresponding delete buttons. Below is the HTML snippet for a gallery containing two images: <div> <div class="image"> <img src="URL1"> <button class="remove">X</ ...
Is there a way to trigger an ajax request when a user opens a select menu "before the menu opens"? The ajax request would determine which options should be enabled or disabled. Initially, I tried using a click event to make the ajax call. However, the is ...
In my project, there is an Angular directive responsible for loading data from a service. However, the data is being loaded using a variable obtained from a controller, which in turn was loaded from a service. Below is the code snippet for the directive: ...
My task involves converting a nested JSON object into a specific format, as demonstrated below: let jsonObj ={"data": { "cardShop": { "cardData": { "cardTitle": "The Platinum Card<sup> ...
As a beginner in reactJS, I am attempting to utilize lightence-ant-design. https://github.com/altence/lightence-ant-design-react-template/tree/main According to the instructions on GitHub, I followed the steps below: To ensure compatibility with the lates ...
I'm encountering an issue while trying to launch a pre-built UI project using vue.js. Despite having Python installed with the environment variable properly set, I keep getting an error when running the npm install command. How can this be resolved? n ...
I am facing an issue with my web API that is returning a JSReport as an encoded byte array. Despite multiple attempts to read the byte array, I keep encountering either a black screen or an error message indicating "failed to download PDF". Interestingly, ...
I am working with a few radio input components that have been imported from material Ui react. Each radio input is wrapped in a FormControlLabel component. <FormControlLabel onClick={checkAnswerHandler} value={answer} control={<Radio color=&quo ...
Could someone please clarify which URL I should use in the $.post call to the server for a node.js file? Most tutorials demonstrate with PHP files, but I'm unsure about calling node.js files. Should I post it to the app.js file or the route file? Thi ...
Trying to filter data from a 3-layer array based on child array values. Making progress but hitting a roadblock at the end. { "id": 1, "grandparent": "Timmy", "parents": [ { "id&q ...
Every time I try to perform a mutation, I keep getting a 400 error code for some strange reason. Here is my httpLink code snippet: // ApolloProvider.js const httpLink = createHttpLink({ uri: 'http://localhost:3000/graphql', }); const client ...
Here is my CodePen link: https://codepen.io/santoshch/pen/MWpYdXK .tab1border{ border-right: 2px solid #f0f0f0; } .tab2border{ border-right: 2px solid #f0f0f0; } .tab3border{ border-right: 2px solid #f0f0f0; } .tab4border{ border-right: 2px soli ...
After migrating to Bootstrap 5, I noticed that the following code is broken: <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-prot ...