I currently have 2 mesh objects - the Anchor and the Rod. The Anchor rotates around the z-axis, as shown in the image. The Rod is designed to only move backward and forwards. You can view the image here: .
However, I am struggling to determine the matrix calculation. For instance, if the anchor rotates 45 degrees to face the x-axis, how can I ensure that the rod continues to move backward and forwards?
Just like scooby37 pointed out, the example of combination provided by Troopers is invalid. It is important to avoid the following:
new THREE.Matrix4().makeTranslation(0, 0, z).makeRotationZ(Math.PI/2);
Instead, consider using something like this:
let rotation = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), Math.PI / 6.0);
let transformation = new THREE.Matrix4().makeTranslation(0, this.height, 0);
this.mesh.applyMatrix(rotation.multiply(transformation));
This approach involves matrix multiplication, which is the standard way to combine transformations.
When it comes to rotating around the z-axis:
let rotation = new THREE.Matrix4().makeRotationZ(Math.PI/2);
For the translation, with z representing the delta:
let translation = new THREE.Matrix4().makeTranslation(0, 0, z);
You can start by combining both transformations with the translation:
let transformation = new THREE.Matrix4().makeTranslation(0, 0, z).makeRotationZ(Math.PI/2);
let transformation = rotation.multiply(translation);
Next, apply the transformation to your geometry:
geometry.applyMatrix(transformation);
Sorry if these questions seem silly. I'm diving into React & Material-UI without a mentor to guide me, relying on documentation and tutorials. Is there a better place for quick beginner questions? Maybe a chat forum or Slack group? Not sure if Stack i ...
Hello, I am working on a project that involves multiple roles using VueJs and Laravel. Laravel is used as the back-end while Vuejs serves as the front-end. The project has three different roles: User, Modirator, and Editor. Here is a snippet of my code ...
In my app, I am using the code below to implement a react-dates picker controller inside a popover element. The functionality works well in most scenarios, but there is an issue when the button triggering the popover is located at the bottom of the screen, ...
I am currently experimenting with Ajax to add data into a database using the POST method. However, I am facing an issue where PHP is unable to recognize the post variables being sent. ajax: function createUser() { var _id=document.getElementById('ne ...
I am new to JavaScript and facing some difficulties in converting GeoJSON to a JavaScript Object Array. Using JSON.parse, I successfully parse the JSON generated on the server into a JSON Object. The addGeoJson method from Google returns [object (Array)] ...
Currently, I am in the process of setting up a new project that involves using express.js with typescript integration. Would it suffice to just install @types/express by running the following command: npm install @types/express Alternatively, do I also ...
As I dive into learning angularJS, I am facing a challenge in determining the best architecture for my project. My single page app is designed in such a way that the URL must always remain unchanged; I do not want users to navigate beyond the root route. T ...
My goal is to develop a Web Chat system using PHP, MySQL, and JavaScript. Currently, I store messages in a MySQL database with an incremental ID (indexed), timestamp, sender, and message. To retrieve new messages, I use AJAX to query the database every 50 ...
'use client'; import { useRouter } from "next/navigation"; export default function Todo({ todo }) { const router = useRouter(); return ( <> <li key={todo.id}> <input type=&apo ...
I encountered an error message stating that I cannot destructure the property 'name' of 'e.target' because it is undefined within the createform() method. Despite highlighting the line causing the error, I am still unable to comprehend ...
Recently, I've been using axios.get() to retrieve data from my database. The response is coming back correctly, but for some reason, when I attempt to update the state with this data, nothing seems to change. import React, { Component, useState, useE ...
I have successfully implemented an editable table using jQuery where users can click on a cell to input text. The goal now is to enable the use of ARROW keys for quick navigation within the table. Below is my current code: $( function () { $( "td" ). ...
I'm curious about the issue I am facing with changing the 'this' element on AJAX success. Despite my efforts to switch classes and add a new data attribute to the anchor tag in ajax success, it doesn't seem to be working. Interestingly, ...
I need assistance with converting this code into Next.js 13. My goal is to implement a page animation using Framermotion, but I'm having trouble understanding how to do it in Next 13. // _app.js import { AnimatePresence } from 'framer-motion ...
Looking for guidance on how to effectively use knockout with asp.net membership roles in MVC 4. My goal is to incorporate an editable grid on the page based on whether the user is an administrator or a 'registered user'. I want to ensure that use ...
I've been working on a new page design at this link: The code is still a work in progress, so bear with me as I test out some functions and scripts. At the end of the first section, there are 4 logos that, when clicked, will trigger a modal to pop u ...
I am trying to implement Bootstrap's pagination feature into my project. While I was able to find the HTML code for it on the official Bootstrap page, I am struggling to make the content change dynamically when I move to the next page. Can anyone pro ...
I want to incorporate a Twitter feed on my website that displays images posted. Instead of having the images redirecting users to Twitter when clicked, I would like them to reveal themselves underneath when a link labeled "View Photo" is clicked, and then ...
Looking for a way to control a progress bar script that runs for 180 seconds and then redirects the browser? Check out the code snippet below. I've added an onclick event to test pausing the progress bar. My goal is to pause, reset, and adjust the dur ...
I'm experimenting with components. I have a default export in place but now I think I need to create a named class for my next export. Take a look at the code below: export default Users; import React from 'react'; export class UsersTest e ...