The dazzling world of first person animations with three.js

In the process of creating a first-person game in three.js, I am aiming to incorporate movement in the gun when the player commands actions like walking or shooting. Despite being a novice in three.js and lacking knowledge on animation techniques using animationmixer, I have resorted to a basic approach. My current strategy involves adding a frames variable to the gun and incrementing it with each new game update. To simulate movement, I rely on using sine to alter the y-position of the gun and give it some visual dynamism.

While this technique suffices for simple animations, it falls short when dealing with more complex elements such as recoil effects or interactive item pickups. How can I effectively tackle these types of animations within the realm of three.js?

Answer №1

To unlock more complex animations, consider acquiring models with pre-made animations like this firearm and then utilize the GLTF loader (located in three.js/examples/js/loaders) to import it.

var loaderGLTF = new THREE.GLTFLoader();
loaderGLTF.load('gun.gltf', function (gltf) {
  gltf.scene.traverse(function (child) {
    var animations = gltf.animations;
    if (animations && animations.length) {
      mixer = new THREE.AnimationMixer(gltf.scene); // Remember to declare 'mixer' globally
      animation = mixer.clipAction(animations[0]);
      animation.play();
    }
  });
  scene.add(gltf.scene);
}, (xhr) => xhr, (err) => console.error(err));

Don't forget to update the mixer in the render loop by initializing 'clock = new THREE.Clock()' in the init function.

if (mixer) mixer.update(clock.getDelta());

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

Enhancing the user experience by providing auto-complete suggestions while still maintaining the original form functionality

Encountering a curious bug that appears to be affecting only IE and Webkit browsers. I've set up a simple form as follows: <div id="output">Form output is shown here</div> <form id="myForm" action="#" method="post"> <input type= ...

JavaScript implementation of Ancient Egyptian Multiplication using PHP code

Let's dive into the algorithm. If we have two integers, A and B (remember, only integers), that need to be multiplied, here is how it works: we continuously multiply A by 2 and divide B by 2 until B cannot be divided any further, or in other words, un ...

There seems to be a glitch with jQuery on my Angular.js website

I'm trying to implement Masonry.js on my website, and although I've managed to make it work, the solution feels like a messy workaround and I can't quite figure out why it's functioning (and not functioning well). The primary issues I& ...

Limit the 'contenteditable' attribute in table data to accept only integers

I have a question regarding editing table data row. Is there a way to restrict it to only integers? Thank you for your assistance! <td contenteditable="true" class="product_rate"></td> ...

Changing the size of a THREE.CubeGeometry during execution

Currently, I am working with Three.JS r58 and my goal is to dynamically resize a CubeGeometry object displayed on the screen. I attempted one approach where I would remove the affected cubes and add a new one with adjusted dimensions whenever resizing was ...

"Encountering issues with ModalPopupExtender in Internet Explorer, while it functions properly in

Currently, I am encountering a critical issue while implementing ajaxmodalpopupextender on my webpage. The functionality operates smoothly in Firefox with an appealing appearance, however, it encounters display problems in IE where it appears to the side a ...

Having trouble looping through an array of objects containing images in Javascript?

I am currently facing challenges with iterating through an array of objects that contain images. The array appears empty when logged in the console, but upon inspecting it in the console, I can see all the objects along with their iteration numbers. I have ...

Using type annotations is restricted to TypeScript files only, as indicated by error code ts(8010)

I encountered an issue with React.MouseEvent<HTMLElement> const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => { setAnchorElNav(event.currentTarget); }; const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement ...

Send the component template and functions when triggering an expanded view in a material dialog

While striving to adhere to DRY coding principles, I've encountered a dilemma involving a particular use case. The task at hand is to display an expanded view of a component within a dialog box. This component presents JSON records in a paginated list ...

Check if the element is located on the active tab using jQuery

I have implemented a tab system to organize a lengthy form with multiple input fields. The form consists of 4 tabs, and beneath them, there is a preview section displaying the user's selections. In this preview area, I added icons that enable users ...

Toggle the visibility of a div by clicking on another div in a

I have created a unique design where a div features a background image of a face, along with a paragraph, two buttons, and an input box inside it. While I know this question has been asked before, my scenario is slightly different. I want the div with the ...

Error message: "Window object not defined during NextJS build process."

Why am I encountering a 'window not defined' error? I haven't referenced window or document in my code, and it runs without issues during development but throws an error during the build process. ReferenceError: window is not defined at ...

I need to access the link_id value from this specific actionid and then execute the corresponding function within the Ionic framework

I have a JavaScript code in my TypeScript file. It retrieves the attribute from a span element when it is clicked. I want to store this attribute's value in a TypeScript variable and then call a TypeScript function. Take a look at my ngOnInit method, ...

What is causing the "unable to resolve dependency tree" error when using ng new newApp?

Struggling with creating a new Angular app using the command ng new app-name? When running the command, you may encounter the following error in the command line. Installing packages (npm)...npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve depen ...

Tips for eliminating flicker upon the initial loading of a webpage caused by dynamic changes in CSS styles through JavaScript

Struggling with the load order of my CSS and JavaScript... Currently, I have a div with a blue background that is styled to appear sliced diagonally. However, upon initial page load (or CTRL+SHIFT+R), there's a brief moment where the slice effect doe ...

Angular $resource failing to transfer parameter to Express endpoint

I am currently working on an Angular application that needs to retrieve data from a MongoDB collection. To accomplish this, I am utilizing the $resource service within the flConstruct. The "query" function works well as it returns all data from the server ...

Vue-incredible swiper, a pair of components swipe using buttons adjacent to one another

I am currently using vue-awesome-swiper and encountering an issue. The swipers on my page have buttons (prev slide, next slide) for navigating through slides. However, when I include two swipers on the same page, the buttons of one swiper end up affecting ...

Problems encountered when using Vue.js codes with Webpack

I am utilizing Webpack along with Vue.js. I have a very straightforward code that looks like this: <div id="msg"> <h1>{{msg}}</h1> </div> new Vue({ el: '#msg', data:{ msg:'Hello' } }); When ...

Troubleshooting: Javascript success callback not executing upon form submission

A snippet of my JavaScript looks like this: $(document).ready(function(){ $("#message").hide(); $("#please_wait_box").hide(); $("#updateinvoice").submit(function(e){ $("#message").hide(); ...

Sending multipart/form-data with ajax in PHP returns as null

Recently, I encountered an issue with a form I have. It has the following attributes: method="post" and enctype="multipart/form-data" Every time I submit the form using AJAX $("#openTicketSubmit").click(function(){ var support_ticket_form_data = new ...