Is it possible to create a background layer with an image sequence?

I’m relatively new to 3D libraries, so my apologies if my question seems obvious or silly. I’m interested in achieving a result similar to this project but with improved performance. The project in question was created using Babylon JS, featuring a 2D background layer with an image sequence that changes as the camera rotates around a target. Additionally, it includes a 3D model that overlays the background image sequence. With this in mind, is it possible to achieve nearly the same effect using Three.js? If so, could you guide me on what I need to know and how to proceed?, any help would be greatly appreciated!

What do you mean by sequence? Nothing seems to be moving when camera is rotating - it’s just a building and an environment map, no?

Actually, that project, specifically the building rotation animation, consists of an image sequence with 360 frames. This sequence is loaded at the start of the website and is synchronized with the camera’s rotation movement. Additionally, there’s a 3D mesh overlay across the entire image sequence. This mesh is what the user has to interact with. These elements are highlighted when certain buttons are pressed, as shown in the image below.

Note I’m not sure if it’s relevant, but I believe the animation was created in 3D Max and then exported. The person who developed the project recreated the camera target used in the render, but this time within the 3D library (Babylon, in this case). All of this was done to align the actual camera with the 2D sequence.

By inspecting the DOM you can figure this out:

  • there is a div containing a complete set of .webp background images (like this one). This is nothing but javascript driving which one to show and hide the rest of them based on mouse panning (I applied filter grayscale + opacity just to identify it)
  • there is a canvas (webGL) with the actual ‘green’ overlay that triggers mouse clicking. This is the real 3d element, managed by babylon.js for sure, but just in the form of simple planes for user interaction, not a real “very detailed 3d model of the building complex”.

You can replicate both elements camera sync in three.js by using an orbit control, forcing a “snap to Y angle” stepped movement. In that regard, the only piece of data you need is the Y angle between each .webp image, and force orbit controls to snap to that angle in Y. For this case you can infer that by dividing 360 by the total amount of images :wink:

4 Likes

I hadn’t noticed the div that contains the .webp background images. I will definitely give it a try. Thanks, I really appreciate it