google / google/model-viewer

Offsetting the model in canvas without changing perspective

Open
#4,993 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
8.2k
Forks
947
PR merge metrics
No merged PRs in 30d

Description

In my very specific use case, I had a model view with a specific perspective I could not change, which caused a visually asymmetric alignment. I wanted to offset the model in the canvas to make it look centered initially. I tried many things before finding the working solution I am sharing here. Specifically, I could not find a responsive CSS solution. Also it is quite difficult to trigger a view update without resetting the frame (tried e.g. updateProjectionMatrix, queueRender, requestUpdate, updateBoundingBox... nothing worked). I would like to see a more integrated way to do this. My solution has the issue of showing the model jumping on load, it requires zoom control to be enabled, and i did not test it with panning. But it is minimal, responsive, and preserve user orbit control. BTW, my solution is only for horizontal offset... Replace the `.07` with your desired horizontal shift fraction.

![Image](https://github.com/user-attachments/assets/b4a63911-1c79-4ce2-8c75-88224aaba2ad)

` e.description == 'scene')]
new ResizeObserver(() => {
scene.camera.filmOffset = scene.camera.getFilmWidth() * dx
mv.zoom(.001 * Math.sign(mv.zoomSensitivity)) // Trigger a view update without resetting the framing. Requires zoom to not be disabled and not be at maximum zoom-in
}).observe(mv)
}
```

Edit: Multiplying by the sign of the zoom sensitivity is for the edge case where you set the zoom sensitivity to be negative and you start at maximum zoom-out

Might be related:
https://github.com/google/model-viewer/discussions/4733

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.