Greetings! I am currently working with three.js and I am attempting to rotate my 3D model along the x-axis. However, when I use the following code: object.rotation.x += 0.01;, it does not produce the desired effect. The image below depicts the current rotation on the left and the desired rotation on the right.
Please note that the duke-like shape represents my 3D model.
https://i.sstatic.net/L5LTH.jpg
The issue at hand involves the placement of the mesh's origin, which is not centered according to your duck images (great job on those!).
To resolve this, one solution is to adjust the Y-direction of the mesh's vertices so that the origin aligns with the center (refer to this explanation):
geometry.translate( distX, distY, distZ );
Alternatively, you can automatically reposition the origin of the mesh by using a bounding box to determine its center (eliminating the need to manually calculate the Y-axis translation):
// Define a bounding box:
var box = new THREE.Box3().setFromObject( mesh );
// Reset the mesh's position:
box.center(mesh.position);
mesh.position.multiplyScalar(-1);
Next, place the mesh within a pivot object:
var pivot = new THREE.Group();
scene.add(pivot);
pivot.add(mesh);
(Refer to this guide as well). With these adjustments, you should now be able to rotate your duck around the x-axis as needed.
I attempted two different methods to resolve this issue without success. Here is the code snippet I used:
// Create a bounding box:
var box = new THREE.Box3().setFromObject( andy );
// Reset mesh position:
box.getCenter(andy.position);
andy.position.multiplyScalar(-1);
var pivot = new THREE.Group();
scene.add(pivot);
pivot.add(andy);
//var xAxis = new THREE.Vector3(0,-1,0);
//rotateAroundObjectAxis(andy, xAxis, Math.PI / 180);
markerRoot.add(andy);
/********* Generate object rotation speed *************/
onRenderFcts.push(function(){ //loop function
//andy.children[0].material.opacity -= 0.01;
//andy.position.x -= 0.01;
pivot.rotation.x -= 0.01;
//andy.rotation.x += 0.01;
//andy.rotation.y += 0.01;
//andy.rotation.z += 0.01;
})
EDIT: I was able to solve the issue with the following code:
// Create a bounding box:
var box = new THREE.Box3().setFromObject( andy );
// Reset mesh position:
box.getCenter(andy.position);
andy.position.multiplyScalar(-1);
var pivot = new THREE.Group();
scene.add(pivot);
pivot.add(andy);
//var xAxis = new THREE.Vector3(0,-1,0);
//rotateAroundObjectAxis(andy, xAxis, Math.PI / 180);
andy.children[0].geometry.center();
markerRoot.add(andy);
/********* Generate object rotation speed *************/
onRenderFcts.push(function(){
//andy.children[0].material.opacity -= 0.01;
//andy.position.x -= 0.01;
andy.rotation.x += 0.01;
//andy.rotation.y += 0.01;
//andy.rotation.z += 0.01;
})
Getting the center of Object.children[0]'s geometry is crucial in this code snippet.
When working with Vue 3 and mutating a prop that is an object (I understand it's not recommended to mutate props directly, but in this case it works because it's passed by reference as an object), I noticed that the changes reflect in the Vue Dev ...
https://i.sstatic.net/6VOIo.png Currently utilizing Vuetify for my project <v-select id="makeMeBlue" dense outlined :items="form.values.urlTypes" label="Single or Multi URL" v-model="form.values.urlType" ...
Having recently started learning JavaScript, I attempted the code below but couldn't quite get it to work. Despite consulting various resources, I still wasn't successful. Desired Output: To check if AUTO damage is present in the data. If so, re ...
Utilizing React Hook Forms alongside MUI TextField components has been a productive challenge for me. I've been able to successfully fetch data from Firestore and aim to prefill the form with this retrieved information. Although I am employing useFor ...
I wrote a script to display a stacked Google chart using JSON data stored on the wwwroot directory - <html> <head> <title>DevOps Monitoring Application</title> <link rel="icon" type="image/png" hr ...
Hey there! I'm currently working on a Housing blog using ReactJS and NodeJS. One of the tasks I tackled was creating a login controller in NodeJS to send user details, including the image path from the database, to the frontend. The image path is sto ...
Currently, I am in the process of creating a unit test for my confirmation modal that relies on MatDialog. The initial test I have set up is a simple one to ensure that the component is successfully created. Below is the code snippet from my spec file: im ...
Imagine I am the owner of a website called "treat1creator.com". I want my clients, who are also website owners, to send HTTP requests to my server that contain cookies I have generated. Here is how it works: User "Sally" visits my site at treat1creator.co ...
Check out this updated grid example from the official examples. In my application, I need to reposition the sortOrders array. created: function () { var vm = this; this.columns.forEach(function (key) { vm.sortOrders[key] = 1 }) ...
In my current project, I am utilizing express-session. Let's say a session has been created between the web browser and the Node.js server with a default expiration time of one hour. At this point, there is a cookie named connect.sid stored in the use ...
I am encountering an error in Cypress A plugin has thrown the following error, causing our tests to stop running due to a plugin crash. Please verify your plugins file (/home/dev2/Desktop/kavitaSeffcon/CypressProject/cypress/plugins/index.js) Error: ENOE ...
How can I apply the selected class and remove any previously selected classes? <html> <select name="Button-Style" id="Button-Style" style="width:100%;"> <option value="Sun-Flower">Sun Flower</option> <option value ...
I'm attempting to transfer data from my AJAX request into a PHP $_POST variable in order to update my database. HTML <form id="23" method="post"> <select name="admin" onchange="chosenadmin(23)"> <option value="rick">rick&l ...
Using Spring as a webservice, I received a JSON response with stock data: [ { "date": "2016-04-17", "open": 1085.0, "high": 1092.2, "low": 1072.0, "close": 1088.3, "volume": 54100, "value": 1088.3 }, { "date": "2016-04-14", "open": 1081. ...
Currently, I am facing a challenge with a Java based application where I need to click on a cancel button. I am using IE Driver, Eclipse IDE, and my application only supports IE. [I am scripting in Java] Here is the scenario: Login to the application An ...
I am encountering challenges with implementing a dropdown menu list for my react app. The issue at hand is that I have an API where one of the keys (key3) has values separated by commas that I wish to display in my dropdown list. The structure of the API ...
I am currently facing an issue with the following problem: Your task is to create a function called persistence, which takes a positive parameter num and calculates its multiplicative persistence. Multiplicative persistence refers to the number of times y ...
Currently, I am working with autocomplete jQueryUI and have this code snippet: .autocomplete({ source: function( request, response ) { var results = $.getJSON( url, { term: extractLast( request.term ) }, response ); console.log(results); ...
I have created a form using Bootstrap (Form component in ReactJS), but when I attempt to click on the submit button without entering any input, the form is still submitted. How can I implement form validation so that it only submits when all input fields a ...
I'm currently in the process of developing a React application that includes a line chart showcasing the timeline of data recordings starting from a specific point in time up to the present day. To achieve this, I am leveraging the Chart.js JavaScript ...