Animating a ThreeJS Mesh using the TweenMax scaling method

Having issues trying to implement a scaling translation to my mesh[0] using TweenMax. While other animations like rotation work fine, I encounter an 'Uncaught TypeError: Cannot assign to read only property 'scale' of object '#'' error when attempting to scale using 'mesh[0].set.scale' as the first argument.

I suspect this problem arises from the combination of GSAP and ThreeJS, as the same code functions correctly in plain javascript.

I've provided minimal code here, but please let me know if more information is required!

const geometry = new THREE.IcosahedronBufferGeometry( 1, 0 );
materialRed = new THREE.MeshStandardMaterial({
  color: 0xFF0000
});

mesh[0] = new THREE.Mesh( geometry, materialRed );

scene.add(mesh[0]);

TweenMax.to(mesh[0], 1,  
{
  scale: 2,
  ease: Elastic.easeOut,
  yoyo: true,
  repeat: -1,
  yoyoEase: Bounce.easeOut,
  delay: 1,
}
);

Answer №1

Discovered the solution to my problem:

TweenMax.to(mesh[0].scale, 1, 
{ x: 1.2,
  y: 1.2,
  z: 1.2,
  yoyo: true,
  repeat: -1,
});

I realized that I was attempting to edit the entire mesh instead of focusing on adjusting the scale specifically. Now that I understand this, I can proceed to scale up and manipulate as needed.

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

Updating the value of the chosen drop down option upon selection

I currently have a Material UI dropdown menu implemented in my project. My goal is to use the selected option from the drop down menu for future search functionality. How can I utilize onChange() to store the selected option effectively? At the moment, I ...

Angular 6 implement a waiting function using the subscribe method

I need to make multiple calls to a service using forEach, where each call depends on the completion of the previous one. The code is as follows: itemDefaultConfiguration.command = (onclick) => { this.createConfiguration(configuration.components); ...

Encapsulate the HTTP request within a common function for reus

My rest-provider service handles all of my http calls, but I've noticed that each function is repeating a lot of the same http code. It seems like I should create a shared function to avoid this repetition and make it easier to update in the future. ...

Is there a way to activate an event when using # or @ in a text field on React/Next.js?

I'm in the process of starting a new project and I am thinking about how to incorporate this into react/nextjs. I want to create a user selection or hashtag selection dialog around the textarea, but I haven't been able to find any helpful article ...

Modifying webpack settings for a create-react-app based project: A step-by-step guide

After starting a new react project with create-react-app, I am looking to update the webpack configuration. However, I cannot seem to locate the webpack file. Should I be creating this file myself, or is there another process involved? As someone who is ...

The intended functionality of clicking on an image is exclusively reserved for its immediate parent element

I have a feature on my website that displays an image gallery. When a user clicks on an image, it opens up the image in full screen similar to Facebook's theatre mode. I have written code so that when the user clicks anywhere in the container of the i ...

Utilizing JavaScript within a WordPress loop

I'm facing an issue with running JavaScript within my WordPress loop where it doesn't seem to recognize the PHP variables. My goal is to create a functionality where clicking on one box reveals hidden content, and clicking on the same box or anot ...

Retrieve various key-value pairs from the JSON data in the global market API using AJAX

I have recently developed a real-time API specifically designed for monitoring World Stock Markets. This API covers popular indices such as Nifty, Dow Jones, Nasdaq, and SGX Nifty. If you are interested in accessing this Real Time API, you can do so by vi ...

Upon reviewing the webpage using an IPAD and AngularJS

I recently completed a web application using AngularJS and PHP. It functions smoothly on Chrome and Firefox, but it encounters loading issues on IE due to the number of JS files. To solve this problem, I will need to reduce the amount of JS files for it to ...

Issue encountered while validating password using regex pattern?

There seems to be an issue with password validation when requiring 1 upper case, 1 lower case, 1 number, and 1 special character. methods: { validateBeforeSubmit() { this.$validator.localize('en', dict) this.$validator.validate ...

Format the date using moment() for the last week of the current year and return it with the year. Next year's

I encountered an unusual problem when using Moment.js with Angular.js. When I use the .toISOString() method, I get the correct date, but when I use the .format() method, the date is completely wrong. Here is an example to illustrate the issue: Code snip ...

Troubleshooting the sidebar pin-unpin problem using Jquery and CSS

I have created a single side panel that allows me to toggle between opening and closing the sidebar by hovering on it. I can also pin and unpin the sidebar by clicking on the pin image. Now, I want to open the sidebar onClick instead of onHover and remove ...

Angular Resolve Upon Application Reloading

Is there a way to postpone the initialization of my Application Controller (similar to using the 'resolve' attribute in the router) when reloading a page? Or more importantly, how can I delay the rendering of the view until my controller has succ ...

Accessing process.env in Nest.js controllers

Is there a way for me to access process.env.SOME_FIELD in nest.js? app.module.ts ... modules: [ ... ConfigModule.forRoot({ envFilePath: '.env.' + process.env.APP_CODE }), CatModule ... ] ... CatController.ts ...

Input information into the system from the successful response found on a different page

After receiving my ajax response successfully, I want to redirect to a new aspx page where there are 30 input type text controls. My goal is to populate all the values in those controls. How can I achieve this? Any suggestions? This is what I have attempt ...

Creating a sidebar with child elements in Vitepress: A beginner's guide

I'm having trouble displaying my folder tree in the sidebar. When I click on a parent element like Group, the children elements are not showing up as expected. https://i.sstatic.net/kdc98.png One strange thing is that the Group elements do not have ...

Accessing and fetching data from a PostgreSQL database using JavaScript through an API

I am currently working with an npm package called tcmb-doviz-kuru to fetch currency data from an API and then insert it into my database. However, I am facing an issue with mapping the data to properly insert the values. Below is my code snippet: var tcmbD ...

Display sqllite database information in an HTML view using Ionic 2

After executing a select query against the database, I am able to read the results from the logcat and view the data there. However, I am encountering an issue where the data is not rendering in the HTML view after binding. //data retrieve section db.exec ...

Simply interested in extracting the JSON Class specifically, not all of the data

Looking for a way to extract only text from a specific class using $.getJSON and YQL. Currently, it retrieves all data and removes tags. Is there a method to achieve this? function filterData(data){ // remove unwanted elements // no body tags ...

The reduce function is displaying an undefined result

Check out this code snippet: const filterByType = (target , ...element) => { return element.reduce((start, next) =>{ if(typeof next === target){ start.push(next) } } , []) } I'm trying to achieve a specific g ...