Wave of the figure in three.js

I have sculpted a humanoid figure and now I am attempting to animate the figure waving with its left hand when the waveButton is clicked. I established a hierarchy where the body element is the parent, with leftArm, rightArm, leftLeg, rightLeg, and head as its children.

//creating body
var body = new THREE.Mesh( geometry, material );
body.position.set(0,0,0 );

//creating leftArm
var geometry = new THREE.BoxGeometry(sizes.armW,sizes.armH,sizes.armD);
var leftArm = new THREE.Mesh(geometry, material);
leftArm.position.set(sizes.bodyW/2 + sizes.armW/2,sizes.bodyH/100,0);


//In this function, I am attempting to rotate the arm for waving, but it rotates around its middle point like a clock hand.
function waveHand()
{
    leftArm.rotation.z += direction * 0.01;
}

How can I modify this function so that the hand remains connected to the body and waves from that position instead of becoming detached and rotating around its center?

javascriptthree.js

Answer №1

Utilization of trigonometric functions:

var world = new THREE.Scene();
var observer = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
observer.position.set(0, 0, 10);
var creator = new THREE.WebGLRenderer();
creator.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(creator.domElement);

var boxOneGeom = new THREE.BoxGeometry(0.25, 2, 0.25);
boxOneGeom.translate(0, 1, 0);
var boxOne = new THREE.Mesh(boxOneGeom, new THREE.MeshNormalMaterial());
world.add(boxOne);

var boxTwoGeom = new THREE.BoxGeometry(0.125, 1, 0.125);
boxTwoGeom.translate(0, 0.5, 0);
var boxTwo = new THREE.Mesh(boxTwoGeom, new THREE.MeshNormalMaterial());
boxTwo.position.y = 2;
boxOne.add(boxTwo);

var timekeeper = new THREE.Clock();
var period = 0;
var earlier = 0;

display();

function display() {
  requestAnimationFrame(display);
  earlier = timekeeper.getDelta();
  period += earlier;
  boxOne.rotation.z = Math.sin(period * 2) * THREE.Math.degToRad(10);
  boxTwo.rotation.z = Math.cos(period * 8) * THREE.Math.degToRad(20) + THREE.Math.degToRad(20);
  creator.render(world, observer);
}
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>

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

Refreshing a component in React when a prop changes

My understanding is that React components update when their props or state change. For example, I declare a variable like this: let percentage = { width: '10%', }; Then, I have a function using setInterval to upd ...

javascriptreactjsreact-router

Is it possible to ensure a div occupies all available space within a column using the vh-100 class in bootstrap?

In the <div class="bg-primary"></div> element, I'm trying to make it take up the remaining empty space without exceeding the vh-100. I've experimented with various solutions but haven't been able to find a fix yet. b ...

javascripthtmlcssweb-scrapingbootstrap-5

Possible rewrite: "Unable to use jQuery to add elements to data fetched through AJAX requests."

I am looking to add a button to copy code inside every div that has a class starting with language. The code is functioning properly, however, after attempting to retrieve data from the database using Ajax, the button no longer appears in the div as it did ...

javascriptphpjqueryhtmlajax

The Final Div Fluttering in the Midst of a jQuery Hover Effect

Check out my code snippet here: http://jsfiddle.net/ZspZT/ The issue I'm facing is that the fourth div block in my example is flickering quite noticeably, especially when hovering over it. The problem also occurs occasionally with the other divs. Ap ...

javascriptjquerycss

What are some effective ways to integrate the WordPress API with ReactJS?

Wordpress recently introduced an API that allows you to make HTTP requests without worrying about routes, as the backend is handled for you. I'm curious, how can I integrate ReactJs with Wordpress API? This has been a frustrating challenge for me be ...

javascriptajaxwordpressrestreactjs

Making a POST request with ajax in Django

I encountered some difficulties while attempting to send a POST request using ajax in Django. I have searched various resources, but have not yet found a solution. Below is the javascript code that I am using, following this guide: $.ajax({ url: &apo ...

javascriptjquerypythonajaxdjango

Uniforms specific to render time in Three.js

Exploring a new technique for implementing per-object motion-blur effect by calculating previous pixel positions within shaders. The first step of this technique is to create a velocity map of moving objects. This requires having the projection and model- ...

three.js

Error encountered: Google Maps API V3 is returning an undefined value for getCenter() function after an ajax call

Currently, I am in the process of updating search results through AJAX after dragging the map. The code snippet below illustrates how I am accomplishing this task: function initMap(){ var locations = []; var count = 0; $('.oneListing').each(func ...

javascriptjqueryajaxgoogle-mapsgoogle-maps-api-3

Can the dropbox option be automatically updated when input is entered in another text field?

I'm working on a form with a dropdown containing category names and a text field for entering the category code. What I need is for selecting a category name from the dropdown to automatically display the corresponding category code in the text field, ...

javascriptjqueryruby-on-railsrubyajax

Ways to retrieve the most recent state in a second useEffect call?

Currently, I am encountering a situation where I have implemented two useEffect hooks in a single component due to the presence of two different sets of dependencies. My challenge lies in the fact that even though I update a state within the first useEffec ...

javascriptreactjsreact-hooks

Having trouble simulating a custom Axios Class in JavaScript/TypeScript

Here are the function snippets that I need to test using jest, but they require mocking axios. My attempt at doing this is shown below: // TODO - mock axios class instance for skipped Test suites describe("dateFilters()", () => { beforeEac ...

javascripttypescriptaxiosjestjsjest-mock-axios

Set the property state to false based on the value of another property in Mongoose Express NodeJS

I am trying to update the status property of a sale based on the outstandingBalance value being equal to 0. Currently, I am able to successfully update the "outstandingBalance", but I want to automatically change the status if it reaches 0. Below is the c ...

javascriptnode.jsmongodbexpressmongoose

Is Implementing a Promise for Preprocessing in NodeJS Worth It?

Looking to achieve the following using NodeJS + Express: Client sends a post request with JSON document data={text: "I love Stackoverflow", shouldPreprocess: <true or false>}; Need to call an external WebSocket service for sentiment analysis on the ...

javascriptnode.jsexpresswebsocketpromise

Having trouble with triggering a Material UI modal from a Material UI AppBar on a Next.js page

As a newcomer to the world of React.js and Next.js, I am encountering difficulties when trying to open a Material UI modal from a Material UI AppBar within a Next.js page. Most of the code I have implemented here is directly copied from the Material UI we ...

javascriptreactjsnext.jsreact-hooks

Having difficulty receiving a response from an AJAX call within the success function

After browsing through this stack link Ajax response not calling success:function() when using jQuery 1.8.3, I'm puzzled as to why the success function is not invoked when I uncomment the dataType line. It seems that setting dataType = JSON prevents t ...

javascriptjqueryajax

Error message: Uncaught TypeError - Unable to retrieve data using POST method in react with node and express servers

I am currently working on creating a Login / Register form using react for the client-side and node / express / (mongo) for the backend. The backend functionality is working smoothly as expected, with successful storage of credentials in the database upon ...

javascriptnode.jsreactjsexpressfetch-api

Where can I locate a specific child element in this scenario?

Currently, I am exploring the possibilities of integrating AngularJS into my application and have encountered a question regarding the click event implementation. Within my HTML code: <div ng-click='clickMe()' ng-controller='testCtrl&ap ...

javascriptjqueryhtmlcssangularjs

Exploring the implementation of waterfall in a Node.js application

async.traverse(map, function(item, tnext){ async.waterfall([ function(wnext){ console.log("One"); //performing MongoDB queries db.collection.find().toArray(function(err){ if(err){ ...

javascriptnode.jsmongodbasynchronousasync.js

Managing errors that occur while handling JSON with AJAX by implementing a suitable backup plan

Imagine there is a user.json file stored on a web server that contains: { "name” : “ivana”, “age” : “27” } Now, I make a request to retrieve this JSON data using the following code: var user = $.ajax({ url: pathsample.com/user.js ...

javascriptjqueryjson

Even when there is a change in value within the beforeEach hook, the original value remains unchanged and is used for dynamic tests

My current project setup: I am currently conducting dynamic tests on cypress where I receive a list of names from environment variables. The number of tests I run depends on the number of names in this list. What I aim to achieve: My main goal is to manip ...

javascripttypescriptcypress