360 view using CSS3DRenderer

Questions
1

Hi,

I have a customer who wants to implement a 360 view for his architectural images. (Yes, he does not want to have a 3D object, but use a PNG image for every time the scene is rotated (Fake 3D)).

Similar to this:

Typically, a problem like this is solved by using a simple mix of HTML “div” + “img” tags and then dynamically changing the image source in javascript for every mouse drag. (i.e rotate)

But in this case, the customer has asked me to do a similar implementation but also have 3D markers on top of the 2D images and also provide the functionality of zoom/pan which I don’t think is possible to do. i.e (Canvas will always occlude all other HTML elements, so only 3D markers will be visible)

Is it possible to create a blend of both where the 2D (360 images) and 3D sprite markers can be a part of a single scene? Is this possible to do this using CSS3DRenderer?

Any help regarding this will be invaluable.

Regards,
Srinivas

1 Like
2

It is possible to blend 2D and 3D - in the renderer set alpha to true - and don’t add any background to the scene. The canvas will be transparent except for the rendered elements, so you are free to add any 3D objects / sprites / CSS3D labels plus camera controls. What this will not solve is depth testing for the markers.

If you can drop using divs and imgs and go full 3D - it would become a bit easier. You can place a sprite in the middle of the 3D scene - and set the texture to one of your 2D images. Then, when the user pans the scene, change the sprite texture as you would do with the img element and rotate 3D markers around the centre point - sprite will occlude the markers that move behind it (you can also manually define the angle at which markers disappear, that may give a more pleasant effect.)

1 Like
3

Hi,

Thanks a lot for the reply. Its much appreciated.

In this case, will the sprite not occlude some of the 3D markers in the scene? Also, is it possible to zoom/pan the scene in this case ?

1 Like
4
  1. Yes - that was my point, you’d want the ones that shouldn’t be visible occluded, right?
  2. Also yes, zoom is built-in, but you’ll need to write custom panning to take switching of images into account.
1 Like
5

1.Yes the ones that shouldn’t be visible should be occluded from the scene.
2. I think in this case the pan functionality will be actually (fake rotating) the scene since we keep changing the texture. Isn’t it ?

1 Like
6

Yes - so basically instead of using orbit controls, just listen to mouse events and calculate how far the user is panning. Based on that - adjust the texture on the sprite and rotate the markers. Camera can just sit in one place all the time and just zoom in and out according to wheel / scroll events.

1 Like
7

Great. I think you made it pretty clear for me at the moment.

Thanks a lot man.

1 Like
8

Hi @Srinivas_Prabhu did you solve the problem? I would be interested if you can share a bit the way you used to solve it!

Thanks in advance!