Problems with Three.js animation - the movement is stuck

Seeking assistance from someone knowledgeable in three.js to help troubleshoot my code for creating a moving sphere. I've reviewed several examples incorporating json data, but they all seem quite intricate. Any help is appreciated!

Here are snippets of my code:

function animate(t) {
    camera.lookAt(scene.position);
    // renderer automatically clears unless autoClear = false
    //window.requestAnimationFrame(animate, renderer.domElement);
    requestAnimationFrame(animate);
    render();
}

function render(){
    renderer.render(scene,camera);
}

function updateSpheres(pos1, pos2){
  var geometry = new THREE.SphereGeometry( 10, 10, 10 );
  var violetMaterial = new THREE.MeshBasicMaterial( { color: 0x6259CA , transparent: true, opacity: 0.5 } );
  sphereAnimate = new THREE.Mesh( geometry, violetMaterial)
  scene.add(sphereAnimate);
  var animationData = {
          "name"      : "Action",
          "fps"       : 3,
          "length"    : 2.0,
          "hierarchy" : [
            {
              "parent" : -1, //root
              "keys"   : [
                {
                  "time":0,
                  "pos" :[0,0,0],
                  "rot" :[0,0,0],
                  "scl" :[1,1,1]
                },
                {
                  "time":1.0,
                  "pos" :[3,0,3],
                   "rot" :[0,0,0],
                  "scl" :[1,1,1]
                },
                {
                  "time":2.0,
                  "pos" :[0,60,0],
                  "rot" :[0,0,0],
                  "scl" :[1,1,1]
                }
              ]
            }
          ]
        };
  console.log(geometry);
  var sphereMeshAnimation = new THREE.Animation( sphereAnimate, animationData );
  //ensureLoop( animationData );

  sphereMeshAnimation.play();
  //sphereMeshAnimation.update(0);
}

Answer №1

In the animate function, make sure you are updating your animation correctly.

To do this, use

THREE.AnimationHandler.update( delta );
as shown in this example: https://github.com/mrdoob/three.js/blob/master/examples/misc_animation_keys.html#L159

It seems that animations automatically register with the handler, so if you have already created a THREE.Animation and called .play() on it, you just need to ensure the handler is updating properly.

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

Does turning off javascript in a browser impact ajax requests and javascript functions?

My mind is troubled I've been thinking of options like turning off JavaScript in the browser. If I do that, then AJAX and JavaScript functions won't work, right? If so, is there a solution? ...

Is there a feature on the webpage that allows users to save clicked xy points and display them as text?

Is there a way to incorporate a feature on a website that displays clicked xy points as text, allowing them to be easily copied and pasted? ...

Unable to utilize Socket.io version 2.0.3

When it comes to developing a video chat app, I decided to utilize socket.io. In order to familiarize myself with this library, I followed various tutorials, but unfortunately, I always encountered the same issue. Every time I attempted to invoke the libr ...

VueJS throws an error indicating that the object cannot be extended

I have encountered an issue while trying to update the promo object by adding a new field called colspan. Unfortunately, I am getting this error: uncaught (in promise) TypeError: Cannot add property colspan, object is not extensible at eval (eval at ...

Having trouble with $addToSet and $push not working in updates using Mongoose with MongoDB in Node.js?

My issue involves Mongoose as I am attempting to update a document in MongoDB using the mongoose module. Below is my schema: var User = new mongoose.Schema({ name: String, email: String, list_houses: [{ id_house: S ...

Is it possible to have scope inherit from an object in AngularJS?

Imagine creating an app like this: <script> myArray=<?php echo $array;?>; app={ myArray:myArray, myIndex:myArray.length-1, back:function(){this.myIndex--;console.log("You clicked back");}, forward:function(){this.myIndex++} } ...

In the Node environment, why does null evaluate as less than 3 while also being greater than 3?

How come null is false when compared to 3 in node, and true when compared to 3? $ node > null > 3 false > null < 3 true ...

Tips for retrieving the file name from the <input type="file" tag within a JSP page

I am looking to retrieve the file path from an HTML input type="file, which is selected by the user in the file dialog. <script> function OpenFileDialog(form) { var a = document.getElementById("inputfile").click(); SampleF ...

Tips for creating an input box that only accepts floating point numbers:

I have a custom component - a text box that I am using in two different places. In one location, it accepts integers and in another, floats. For the integer validation (where dataType=2), I have successfully implemented it. However, for the float validat ...

Is there a way to accurately retrieve the width of an element within setInterval without any delay?

I'm currently experimenting with increasing a progress bar using the setInterval function. So far, it seems to be functioning properly. var progressBar = $('.progress-bar'); var count = 0; var interval = setInterval(function () { va ...

What is the best way to showcase the reading from a stopwatch on my screen?

Working on these codes has been quite a challenge for me. I have recently embarked on a JavaScript journey as a beginner and attempted to create a stopwatch project. However, it seems like I may have missed the mark with the logic or implementation somewhe ...

Retrieve a JSON file from the local file system using AngularJS

I recently started learning AngularJS and I am trying to read a JSON file from my local system. However, when I attempt to do so, I encounter an exception error that says: "Access to restricted URI denied XMLHttpRequest." Here is the code snippet: var de ...

When the URL is modified, triggering an event to load

Is there a way to make a page load directly to a specific section and automatically open an accordion? For instance, I have a page with multiple accordions displayed vertically. I already know that using id's in the URL like page#accordion1 will scro ...

What is the best way to showcase arrays in a JSON document?

I'm working on a basic AJAX code to show a JSON file stored locally using this HTML, but I keep getting an 'undefined' error. I'm opting for JavaScript instead of JQuery since I haven't delved into it yet; hoping my code is syntact ...

Calculating the rotation angle of a spinning cylinder in Three.js animations

I'm struggling with this Math problem and my skills are failing me. To see my progress so far, you can view the working example here. After extracting the y and z positions from the rotating cylinder, I've managed to pause the animation when the ...

What is the best way to construct an AJAX call that includes two sets of POST data?

I'm currently working on a project that involves sending WebGL frames/screenshots to a server for saving to the hard drive and later merging them into a video file. I came across this helpful resource: Exporting video from WebGL Without delving too m ...

NodeJS is capable of handling a limited number of requests at a time

Utilizing jQuery to send requests to a local server has been causing some issues. After sending approximately 4-7 requests, the port stops working without any visible error. Eventually, after a few minutes, some of the requests are successfully sent to the ...

Sending various information to a shared name JSON property within a Retrofit model

When interacting with a WebService, I need to retrieve and send data using @GET and @POST methods. However, all responses from the WebService follow a specific format: { "data": { ... }, "success": ... , "message": ...

Creating dynamic routing functionality in Angular 8 allows for a more personalized and

I am struggling with setting up routing in Angular 8. Here is how I am trying to do it: 'company/:id/activity' 'company/:id/contacts' However, I am not receiving any params in the activatedRoute: this.activateRoute.params ...

Toggle Visibility of Elements with Javascript and Html

I've been working on implementing a "Show All / Hide All" feature. Currently, clicking on the text opens the image and text individually. However, I am looking to add a functionality for expanding all divs at once. To see how it currently functions, ...