How to make a 2D background that repeats infinitely in three.js?

Questions
1

My code so far: Ashidotawa - Replit

i have a box as a 2D background and I’m trying to make the background move with the camera. I made it move with the camera a bit, so it looks like it’s far in the background. However, It’s possible to see the actual background, since the background mesh is moving. I tried using % (remainder) to make it move to it’s original position everytime it’s position is 20. It didn’t work. I’m trying to put the whole thing into one line per position value. I apologize if my english isn’t best, since my native language is german. I still hope, that you understand my problem. Thanks in advance.

2

Could you show an example of what you have in mind (game / app that already does something similar) ? It may be easier to help that way.

The code you’ve linked doesn’t run, but to move the background cube to current camera position, you can just copy the position before rendering next frame:

const render = () => {
  backgroundCube.position.copy(
camera.position};

  // NOTE Optionally, if you want the background to be static and never rotate, copy also the quaternion
  backgroundCube.quaternion.copy(camera.quaternion);

  renderer.render(scene, camera);
};
3

Thanks for trying to help, however that is not quite the problem. I got the idea from episode 3 of griffpatch’s topdown scrolling rpg scratch tutorial (geez, what a long name). He also uses % (as far as my understanding goes). Also, the linked code runs for me:

Edit: I didn’t change any code, but now it also no longer runs for me.