How to animate one object from objects group?

Questions
1

Hello, I’m learning Three.JS and I’ve come across an issue.

I have a car wheel which is constructed of two elements: rim (wheel_frame_f_right) and tire (wheel_f_right)

wheel_front_right = new THREE.Group();
wheel_front_right.add(wheel_f_right);
wheel_front_right.add(wheel_frame_f_right);

Now I want to animate this wheel, I have added spinning and going forward to it, works well:

function update(){

 
if (typeof wheel_front_right !== 'undefined') {

	wheel_front_right.rotation.z -= 0.1;
	wheel_front_right.position.x += 0.01;

}}

Now my question is: how can I change rim size inside animation? (later on I will add slider to do so, but now lets stick with plain numbers)

I have tried this:

if (typeof wheel_front_right !== 'undefined') {

	wheel_front_right.rotation.z -= 0.1;
	wheel_front_right.position.x += 0.01;
	wheel_frame_f_right.scale.set(2,2,2);

}

But it doesn’t work and spits out some errors for me. I wonder if it is even possible to animate not the whole group but just an element of it?

2

What errors are you getting? Besides, be aware that you set the scaling to the same value over and over again. It’s probably better to do this just once and not during the whole animation.

3

I get this:
image

As I’ve read, it has something to do with objects being not loaded when this function is being executed and it creates error.

I know it is not the best idea to set scaling like this, but later on I will implement a slider (dat.GUI), so it would be possible to change the rim size in real time (this is how my project looks like, car just rolls down the street):

image
image.jpg1164×470 288 KB

Putting my bare JS code here so you could take a look at it: https://pastebin.com/GvWe6FnE

4

Okay, then try it like so:

if ( wheel_front_right && wheel_frame_f_right ) {

	wheel_front_right.rotation.z -= 0.1;
	wheel_front_right.position.x += 0.01;
	wheel_frame_f_right.scale.set( 2, 2, 2 );

}

Just ensure that both objects actually exist.

5

I have edited my previous post and added a link to whole JS code.

I have tried your suggestion and program didn’t crash, but now wheel doesn’t have animations at all, just stuck to the ground (while other wheels spin and go):
image

And if I do it with !== 'undefined' it gives me the same error.

6

I think the problem is that you declare wheel_frame_f_right as a global variable but you redeclare it in createWheel_frame_f_right(). So instead of doing this:

var wheel_frame_f_right = new THREE.Mesh(wheel_frame_f_right_geometry, wheel_frame_f_right_material );

do this:

wheel_frame_f_right = new THREE.Mesh(wheel_frame_f_right_geometry, wheel_frame_f_right_material );
1 Like
7

You are absolutely right, this was the issue, now it is working properly. Feeling so stupid how I didn’t notice that :woman_facepalming:

Huge thanks for helping me out!