How to place globe on a side of the screen and keep controls around the globe

[MatteoGauthier]

Hey i want to put my globe on the left side of the screen and keep orbitcontrols working, used to rotate around the globe. So I can place elements on the right.

And i don't know how to do this, If someone can help me, thanks, take care :D

I

[vasturiano]

@MatteoGauthier why not make two separate div elements, one on the left for the globe and a separate one on the right for your controls?

[devtarek]

I am facing the same problem. I do need the canvas over the full screen width but position the globe to the right or left. How can I modify the globe position directly and not use the workaround with two separate divs please?

[vasturiano]

@devtarek I suppose you could use css overflow or a negative left margin to make the canvas much larger (off window) towards the left side. But I'm wondering why do you need the globe canvas element to be full width?

[devtarek]

Thanks for the fast feedback!

I want the user to be able to zoom in on the globe that is positioned on the right. With a div of e.g. 50% you see the globe hitting the width of the div and being cut off (on the left side, on the right side, too but that is OK) – because overflow:visible is not doable with canvas elements. So, I need the canvas to be 100% and the globe positioned on the right side. Is there really no way to achieve that? Thank you in advance!

[dcalano]

Facing same issue. I would like to keep the canvas covering the full length of screen and using another div overlay elements to the empty space just like in the @MatteoGauthier's image where hopefully could use a click on the globe or a ui element button to trigger the globe to animate to the left/right side like in the image and back to the center as needed

[vasturiano]

@dcalano and @devtarek, here is an example using a simple approach of negative left margins to overflow the space on the left side beyond the boundaries of the element.

Here is the code: https://codesandbox.io/s/offset-globe-bv763?file=/src/index.js

Does this work for your case?

[dcalano]

Sorry but no, this simply subtracts the view from part of the screen. This does not effectively move the globe but leave the canvas to cover the display.

Edit: This also does not seem like it would be a useable hack to support animating the globe from one position to another

[vasturiano]

@dcalano perhaps I'm missing what specifically is not possible with this approach, can you explain more in detail? For me, the two methods are visually identical. The offset could also be animated by tweening the css and width prop of the component.

[dcalano]

What do you mean they are visually identical? You're telling me that you can't see the difference in the screenshot I posted and the example picture that OP posted? You can't see the large chunk of white pixels on the right side of the screen that doesn't have stars all over it and is NOT part of the threejs canvas? The only thing setting a margin does is shrink the canvas, it does not fix the issue at hand. The canvas should not change, it should not shrink, the canvas should not be translated left or right unless the bounds of the canvas can then be extended to re-fill the space that was left empty by translating it left/or right.

Also, the codesandbox link you posted does not work and shows that it cannot be rendered due to an "index of null" error. I had to copy the code to my own editor

Edit: the sandbox code works, apologies my adblocker was preventing it from running, though the issue is the same.

[vasturiano]

I've adjusted the sandbox so it doesn't have the artifact white margin on the right side.

Here's the demo: https://bv763.csb.app/ And the code: https://codesandbox.io/s/offset-globe-bv763?file=/src/App.js

This is done just by manipulating the canvas width and the negative left margin in the css. It could easily be animated too if needed. Is there some part of this approach that does not behave as expected?

[dcalano]

Awesome this looks great! :D

Edit: Apologies for late. I was able to get it working with your example merging it to my own codebase. Thanks!