Maintain the vertexShader's movement even when the mesh is rotating

Currently, I am adjusting the vertices of my cube along the y-axis.

Although this method works well when simply moving the cube, issues arise when I begin rotating it. The movements continue to follow the global y-axis even during rotation. Is there a way to separate the rotation and movement of the vertices to avoid this behavior?

Visit this link for code reference

void main()
{
    vec4 modelPosition = modelMatrix * vec4(position, 1.0);

    float displacement = sin(uTime) * 2.;
    modelPosition.y += displacement;

    vec4 viewPosition = viewMatrix * modelPosition;
    vec4 projectedPosition = projectionMatrix * viewPosition;

    gl_Position = projectedPosition;
}

Answer №1

When dealing with matrix operations, it's important to remember that they are not commutative. After applying the modelMatrix, you actually translate the model like this:

v' = translate * modelMatrix * v;

But keep in mind that the order matters when it comes to translation:

v' = modelMatrix * translate * v;

For example:

void main()
{
    mat4 translate = mat4(1.0);
    translate[3].y = sin(uTime) * 2.0;
    vec4 modelPosition = modelMatrix * translate * vec4(position, 1.0);

    gl_Position = projectionMatrix * viewMatrix * modelPosition;
}

Alternatively, you can achieve the same result using a Group. In this case, apply the rotation to the Group and the translation to the Mesh within the Group.

group = new THREE.Group();
group.add(mesh);
mesh.position.y = offset;
group.rotation.x = angle_x;
group.rotation.y = angle_y;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Javascript/HTML to enable file uploads in Rails

I'm currently facing an issue with uploading and parsing a file in Rails, as well as displaying the file content in a sortable table. I followed a tutorial on to get started. This is what my index.html.erb View file looks like: <%= form_tag impo ...

What is the significance of the dollar sign prefix ($) in Vue.js?

Can you explain the significance of the dollar symbol prefix used before property names in Vue.js? For instance, consider this code snippet: this.$emit('clicked', 'demo') ...

The ability to submit a conversation chat is currently

I encountered an issue when attempting to submit a chat, and I received the error message 'handlebar is not define'. I followed the code tutorial provided in this link: https://codepen.io/drehimself/pen/KdXwxR This is the screenshot of the error ...

The occurrence of events for a basic model in Backbone is inexplicably non

I attempted to save some model data on localStorage (and even tried to catch this event and log some text to the console), but it didn't work - no errors and no events either. Here is my JavaScript code: var app = { debug: true, log: func ...

$watch does not work properly when used with arrays

Observing an array for changes and calling a function when it does: $scope.$watch( $scope.aQuestions, function checkQuestionCount(newValue, oldValue) { debugger; if (newValue === oldValue) { ...

An improved method for filling in the choices within a datalist

In my Flask application, I have a datalist with a total of 3360 options. This list is used in an input field where a user can search for port names and see matching options in a dropdown. The current setup is causing some lag, so I am exploring the possi ...

Adjusting the bottom property to a negative value in CSS will stretch the page downwards

I want to hide a portion of an HTML element at the bottom of the page and then reveal the entire element by sliding it upwards upon clicking with the help of CSS3 transitions. The expected behavior is for the part of the element extending below the page t ...

Update the state within a different function in Vue.js

Just starting out with Vue.js and I'm trying to figure out how to update the component's state from a function in another file. I have a basic form with only an input file element. Once the user selects a file, the onChange handler will be trigg ...

Supplier for a module relying on data received from the server

My current component relies on "MAT_DATE_FORMATS", but I am encountering an issue where the "useValue" needs to be retrieved from the server. Is there a way to make the provider asynchronous in this case? export const MY_FORMATS = { parse: { d ...

What is the process of incorporating external links into an angular application?

Attempting to embed an external URL within my Angular app using an iframe has resulted in the following issue: https://i.sstatic.net/liSmX.png The error message reads as follows: https://i.sstatic.net/u9GWw.png Below is the template where I am trying t ...

Encountered an unhandled runtime error: TypeError - the function destroy is not recognized

While working with Next.js and attempting to create a component, I encountered an Unhandled Runtime Error stating "TypeError: destroy is not a function" when using useEffect. "use client" import { useEffect, useState} from "react"; exp ...

Having trouble manipulating state in JavaScript for React Native?

Encountering an issue when attempting to use the setState function in React Native. Code Snippet import React from "react"; import { TextInput, Text, View, Button, Alert } from "react-native"; const UselessTextInput = () => { st ...

Retrieving radio button value in Angular 2

Currently, I am attempting to retrieve the radio button value in an Angular 2 project. The radio buttons are defined in index.html as: <input type="radio" id="options1" name="function" value="create"> <input type="radio" id="options2" name="func ...

The process of altering a span label's class with JavaScript

I am currently working with an HTML element that looks like this: <dd><span class="label label-success" id="status">Production</span></dd> My goal is to update it to: <dd><span class="label label-warning" id="status"> ...

I am puzzled as to why, whenever I send the chosen option from a dropdown to PHP via Ajax, it consistently returns the initial option instead

Check out this code snippet I wrote: <html> <head> <script> initialize = function(){ document.getElementById('generate').onclick = sendRequest("generator.php"); } ...

Reading a JSON file stored within the project directory on iPhone PhoneGap using JavaScript

I need to access a JSON file stored in a project folder. Currently, I am using the following code: var obj = "www/places.json"; Can someone help me figure out how to read a JSON file located in the project folder www when working with iPhone PhoneGap an ...

The value of the bound variable in ng-options does not get updated after the array is

I have a situation where I am populating a list using an array and the ng-options directive in AngularJS. The selected item is bound to a variable called myObject.selectedItem. However, I noticed that even after clearing the array, the value of myObject.se ...

What strategies can be used to efficiently perform Asynchronous Operations on a high volume of rows in a particular database table?

I am looking to perform Asynchronous Operations on every row of a specific database table, which could potentially contain 500,000, 600,000, or even more rows. My initial approach was: router.get('/users', async (req, res) => { const users = ...

What is the best way to use pattern matching to specifically match IDs while ensuring that the variable number aligns without needing to manually code every potential option?

I have recently acquainted myself with Jquery selectors and they are proving to be very useful. The issue I am facing currently is that all of my variable names follow similar patterns of starting and ending. The IDs are generated from elsewhere, and I am ...

Setting up angular-cli project for rc5- Step by step guide

Trying to integrate angular-cli with angular 2 rc5 but facing challenges: The issue of 'Promise' not being found After attempting to install 'npm install -g angular-cli@webpack', typings did not get installed, resulting in WebStorm un ...