Animating the scaling of a shape using Three.js

Currently, I am embarking on my JavaScript coding journey and experimenting with Three.js as well.

I have created a scale animation for a geometry in order to achieve a subtle breathing effect using the following code:

  var frame = 0;

  function animate() {
    requestAnimationFrame(animate);

    mesh.scale.z += Math.sin(frame);
    frame += 0.5;

    renderer.render(scene, camera);
  }

    animate();

However, I've encountered an issue: When attempting to make small adjustments to the stretch of the animation, it speeds up significantly http://jsfiddle.net/ts8ssrk1/12/. On the other hand, if I slow down the animation by changing 'frame +=' to a smaller value, the geometry stretches endlessly.

Can someone provide any recommendations or solutions?

Answer №1

After much trial and error, a breakthrough was made. For anyone looking for a solution, simply replacing mesh.scale.z += Math.sin(frame); with

mesh.scale.z += Math.sin(frame)/5;
did the trick.

The fix turned out to be easier than I had initially anticipated. Progress!

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

An error occurred while trying to load the XMLHttpRequest due to a NetworkError that was

I have encountered an issue while working on a client-side project using jQuery, JavaScript, and various jQuery plugins. Our professor supplied us with a proxy.php file to fetch the required data for our web application. I incorporated the easy tab plugin ...

"Transforming an array using the map method to generate an object containing arrays optimized for

I'm looking to extract an array of objects from a nested array within JS/React. I attempted the following approach, but it resulted in an error regarding react children - indicating that objects cannot be rendered as children and suggesting the use of ...

How can you securely transfer the ARRAY OBJECT from JavaScript to PHP using Ajax?

I am attempting to send a Javascript Array Object via Ajax to PHP and then use that object as a true Array on the PHP side. My current approach has not been successful in terms of utilizing the incoming object as an Array within PHP; I can only parse it as ...

`CSS animation for vanishing line effect`

I want to create an animated logo that gives the illusion of being pulled up by a rope, represented by a vertical black line, from the bottom of the page to the top. As the logo moves upwards, I would like the rope to disappear behind it, but I'm uns ...

I am currently having trouble with req.query not functioning correctly within Next.js for reading query parameters

I am facing an issue while working with a REST API in Next.js 13. I have created the API, which can be accessed at http://localhost:3000/api/portfolio. However, when I try to filter the data using query parameters like http://localhost:3000/api/portfolio?s ...

When text with delimiters is pasted into a Vuetify combobox, why aren't the chips separated correctly by the delimiters?

I'm attempting to create a Vuetify combobox with chips that automatically split the input based on predefined delimiters, such as ,. This means that if I paste the text a,b,c, the component should convert them into three separate chips: a, b, and c. H ...

Utilize the composition API in Vue.js 3 to call a function and pass in a parameter

I'm having trouble calling a function from another component. When I click on a button in my parent component, formTelemarketing(), it should send data to my other component nAsignedCalls() and call the function getCalls(param) in that component. Thi ...

Vuetify's v-list-item no longer has spacing issues when using the v-slot:prepend feature

Currently, I am in the process of designing a side navigation using v-navigation-drawer. While most of my items utilize an icon, I also want to create some custom behaviors. Unfortunately, the title in v-slot:title does not align with the title in the v- ...

A step-by-step guide on duplicating the functionality of the jQuery

Issue at Hand: I'm attempting to recreate the functionality of jQuery's ajax method as I find myself utilizing XMLHttpRequest multiple times within a script. However, I am hesitant to include jQuery as a dependency since I only require a few meth ...

Having trouble organizing a list of objects based on changing keys

Below is the implementation of a custom pipe designed to sort records: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'sortpipe' }) export class SortPipe implements PipeTransform { transfor ...

Angular 2 encountering troublesome JSON response with invalid characters

After fetching a JSON response from an external API, I noticed that one of the variable names starts with a # character, making it look like #text in the JSON structure. Unfortunately, Angular doesn't recognize this variable. Is there a way to remove ...

Accessing an array outside of an Ajax call that was initiated within a success callback

I have a CSV parsing function written in JavaScript that extracts movie names from a CSV file using an Ajax call within a loop. movies = new Array(); for (var i = 1; i < allData.length; i++) { var mName = allData[i][0]; var mPath = allData[i ...

how to create a smooth transition back to the original state after a click event

I've put in a lot of effort to make sure my code for the DECAY shapes is correct up to this point. The click event I implemented makes the shapes gradually start being affected, just as I intended. However, once I release the mouse or finger, it insta ...

What is the process of saving a model with @tensorflow/tfjs-node version 2?

I've been struggling with setting up the save handler to save my model. I've scoured through various platforms like stack overflow and GitHub, but haven't had any luck. Help! Any guidance would be greatly appreciated!!! :) Below is a snipp ...

Taking steps when a number is enclosed within a span

Testing a simple code with similar action to what I want. Apologies for any language errors, hoping to be understood :-) The HTML code snippet: <div class="pagination"> <a href="#" class=""><span>1</span></a> <a href=" ...

What is the best method for submitting a form via ajax that has already been loaded using ajax, all without needing to refresh the current

I have been struggling with a problem for almost a week now. I need to submit a form using ajax, which was already loaded with ajax. I have tried multiple solutions but nothing seems to work. If anyone knows the right approach, I would greatly appreciate y ...

Guide on detecting errors when parameters are not provided with req.params in Node.js

My question revolves around a piece of code that I have been working on. Here is the snippet: const express = require('express') const app = express() app.get('/test/:name', (req, res) => { const {name} = req.params; res.send(`P ...

I'd like to know how to retrieve the start and end dates of a specific month using JavaScript

How can I retrieve the start and end date of the current month? const currentDate = new Date(); const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); const endOfMonth = new Date(currentDate.getFullYear(), currentD ...

Extracting information from the fileuploadfield in Ext JS 3

Currently utilizing Ext.ux.FileUploadField within Ext JS 3.3.1. Aiming to retrieve the file data from the form without having to submit it. Wondering if anyone has insight on whether this is feasible. Currently able to view the filename but not the actual ...

Remove an object based on its unique identifier with the help of mongoose

I am working on developing an API to delete a document in MongoDB using Mongoose. Below is the route I have created: router .route("/tasks") .delete('/:id', function (res, err) { taskSchema.findByIdAndRemove(req.params.id, (err, ...