Add example of Multiple-Viewpoints-Hud with the ViewpointWidget class

[zzh-tech]

This update supplements the existing multiple-viewpoints example, which currently does not support camera movement.

A new ViewpointWidget class has been introduced to maintain a fixed viewpoint window on the main screen, regardless of the main camera’s movement. To achieve a Heads-Up Display (HUD) effect in Three.js, the widget is rendered using a separate scene and an orthographic camera, layered on top of the primary scene.

Please refer to the GIF below for a demonstration of the final effect:

[dmarcos]

Thanks so much for putting the time. The original multiview example doesn't have camera movement to keep the code simple and easy to understand. Yours is great but would be perhaps a bit redundant. Did the original fell short for you?

[zzh-tech]

Thanks so much for putting the time. The original multiview example doesn't have camera movement to keep the code simple and easy to understand. Yours is great but would be perhaps a bit redundant. Did the original fell short for you?

Hi, I’m currently using Spark to implement a practical project. I found the existing Multiple-Viewpoints example a bit misleading for real-world scenarios, since it assumes a static camera. In most applications, the main camera moves—and we typically don’t want the inset viewpoint windows to move along with it. In that case, a different solution becomes necessary. I believe this supplementary example could save other developers time when they encounter this common need.

(To be honest, the current Multiple-Viewpoints implementation isn't particularly easy to follow.)

If you’re open to incorporating this example, I’d be happy to spend some time cleaning up the code and adding comments to make it more educational. We could consider removing some non-essential parts, such as the sky background, coordinate/camera helpers, and resizing logic, to keep the example focused and concise.