When GSAP timeline animation define, Raycaster doesn't correctly work (does work like reverse)

Questions
, ,
1

I have a mouse interactive shader model in my scene. When the model is stable, it works smoothly. This object is a particle instantiated in the THREE.Points object.

While listening for mouse movements with window.addEventListener("mousemove") , I update my Raycast object with the setFromCamera function.

When I make changes with OrbitControl or run GSAP timeline animation, Raycaster is not assigning beams correctly or updating correctly.

My interactive shader model is a separate class. It has a function as follows;

updateMouseRaycaster(){
  const worldDirection = new THREE.Vector3();
  worldDirection.setFromMatrixColumn( this.points.matrixWorld, 2 );

  this.raycasters.mouse.set( this.points.position, worldDirection.normalize() );
}

I run this function when the OrbitControl changes and right after each GSAP timeline animation definition. (Below codes doesn’t any affect to raycaster)

let that = this;

this.controls.addEventListener("change", e => {
  that.object1.updateMouseRaycaster();
});

this.timeline.to(this.object1, {});

this.object1.updateMouseRaycaster();
    
this.timeline.to(this.object1, {});

But the situation is the same.

Where is the problem, how can I solve it?
Thanks.

2

@monster9 –

One possible reason is that matrices might be still not updated when you use them, so the matrices are one frame late. Does the problem persist if you manually update the matrices just before using them?

See methods updateMatrix, updateMatrixWorld and updateWorldMatrix.

– Pavel

3

@PavelBoytchev -

ThreeJS already performs these updates automatically. I tried manually again of course, but it didn’t work.

I’ve been deep diving into the issue for a few days. I realized that having two different triggering “timelines” in GSAP can break the matrix. I was sending the trigger of the ThreeJS rotation operations to my Timeline object first, then my distortion value to my shader material to the same trigger points. This is the first problem. GSAP functions such as onUpdate were not working properly because they were at different points in the same object. For the distortion values of the other object, I had to sample the object on the stage and add it, I had to do this according to the reverse of the first operation so that a smooth transition could be achieved. In this case I needed to play the other “timeline” object. In the end, it was a mess :slight_smile:

Actually the problem here is not ThreeJS sided.

As a solution; I just updated the distortion value to the shader material through the single “timeline” object; I updated the rotation operations with the “MathUtils.clamp()” function in onUpdate. For smooth transitions, I had to add an opacity value to the Shader material.

I’ve analyzed a little bit of visual trickery.

Thanks.

1 Like