requestAnimationFrame | Polyfill for | User Interface library

The import is not correct. It should be:

https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js

three.module.js is the ESM build file whereas three.js is UMD. If you want to use ES6 import syntax in your app, you have to use the ESM version.

The problem is that you have to wait until your texture is actually loaded before rendering to the render target. I've updated your code so it used the async/await syntax in order to solve the issue. Especially have a look how generateTexture() has been changed.

Are you copying this approach from a tutorial? What version of three.js are you using? I'm asking because you're using renderer.render(scene, camera, target, true); but the docs state that .render() only accepts two arguments, so passing a renderTarget doesn't do anything.

I recommend you copy the approach in this demo, you can see the source code by clicking on the < > icon. The essential part is as follows:

Your items are overlapping because you're not allowing any lerping diffing when the items should switch positions.

The current value should never equal the target value. If the values match, than the current value needs to catch up the target — giving that erratic movement and wrong calculations, additionally aggravated for the two sibling elements which should be perfectly in sync to give that immediate snap-back, perceived as a fluid continuous motion.

• Instead of animating two (or more) children independently,
  animate only the parent .loop-container.
• The container should be as wide as one child element exactly.
• "Push" one child element to the far left using position: absolute; left: -100%
• To allow the target value to be always greater than the current value:
  when the target value is greater than 100 — set current to the negative difference of the two values, and target to 0

_{Demo time:}

The flickering you are seeing results from your looping code, where you skip elements of the array when deleting elements (Element 3 needs to be deleted? You call splice(3, 1) and then continue with the loop at index 4. Since the array shifts when you call splice, you should process element 3 again). The imho easiest way to fix this is to iterate backwards over the array. Please note that iterating backwards is less CPU cache efficient (because every array access leads to a cache miss), so another fix would be

I suggest you use pointermove instead of mousemove and also use getBoundingClientRect() in your event listener:

You have to derive your custom classes Marker and Earth in ES6 now. Meaning you have to use the class syntax like below since Object3D is now a class, too.

Neither example is lying.

The browser minimises the number of layers it needs to composite together. It only creates a layer if it's given a reason to believe there'll be a benefit.

If you animate transform or opacity using CSS transitions, CSS animations, or web animations, the browser knows ahead of time that the element is animating in a way that might be optimised by creating a layer, so Chrome creates one for the duration of the animation.

If you animate using rAF, the browser doesn't have this foresight. will-change exists as a way to hint to the browser that it should create a layer for this element, depending on the changing property.

These are hints, and the browser isn't guaranteed to create a layer. There are other cases where some browsers create a layer, such as when another element needs to paint on top of a layer, and in the case of some other CSS like transform: translateZ(…).

The video has frame rate of 25fps, and not 24fps:

After putting the correct value it works ok: demo
The VideoFrame api heavily relies on FPS provided by you. You can find FPS of your videos offline and send as metadata along with stop frames from server.

The site videoplayer.handmadeproductions.de uses window.requestAnimationFrame() to get the callback.

There is a new better alternative to requestAnimationFrame. The requestVideoFrameCallback(), allows us to do per-video-frame operations on video.
The same functionality, you domed in OP, can be achieved like this: