Three.js projection drift during Scroll-Driven 3D Tunnel Flight (Z-axis travel + Y-axis shadow climb)

Questions
1

Hi everyone,

I’m facing a coordinate synchronization issue during a heavy, scroll-driven Three.js animation managed via GSAP ScrollTrigger.

The Setup:

  • The Mesh: A single tree structure that scales and rotates upright from flat ground (rotateX(-90^\\circ) \\to rotateX(0^\\circ)).

  • The Flight: As the user scrolls, the camera/world moves deeply along the Z-axis (forward tunnel travel).

  • The Shadow: A custom light source projects the tree’s shadow onto a virtual back wall, causing the shadow edge to dynamically climb up along the Y-axis.

The Problem:

I am trying to project HTML DOM text overlays to perfectly track the moving 3D intersection point where the shadow climbs the Y-axis wall.

Using standard vector.project(camera) causes severe visual lag and positional drift. Because the mesh is simultaneously translating on the Z-axis, rotating on the X-axis, and the shadow is climbing on the Y-axis, the calculated 2D screen pixels stagger and misalign during fast scrolling.

Question:

What is the most performant way to lock 2D DOM elements to a moving 3D shadow intersection point on a vertical plane under aggressive scroll-bound matrix updates?

Should I use a continuous Raycaster loop from the mesh tip to the back wall to capture the true Vector3 before projecting, or is dropping DOM overlays for HTML5 Canvas/WebGL text textures the only lag-free solution here?

Thanks!

2

This could be a good option.

how far is your camera travelling in a range of units? at a guess this sounds somewhat related to precision issues at larger scales, can you provide a minimal codepen demo to help people understand the issue practically?

3

if we can connect i wil explain my ide and show the codes how far i have reached and where i am stuck rightnow

4

You can upload your code on github for review, so that I can look at exact problem