Add CSS3DRenderer for rendering clickable object in scene.

[ghost]

A feature to add for my virtual tour project. Introduced CSS3DRenderer to overlay on WebGLRenderer, in order to add html objects in scene. Further features is to be discussed based on this thought.

Right now, it renders a picture arrow.png, and a text description as a clickable waypoint.

[JeremyHeleine]

Hi,

Thanks for your help. To be honest, I wanted to add a feature like this but, before, I wanted to finish some other things, like my own 3D renderer (specialized to PSV, that way it doesn't need Three.js and can go further) or a compatibility with virtual reality.

What I imagined is an application in virtual tours (like yours apparently!): virtual reality, waypoints, automatic navigation to these points and even audio description.

However, I fully understand you want to have the feature you need as soon as possible. I'll take a look at what you've done (if I merge it I'll probably need to modify it when my own 3D renderer will be ready).

Thanks again!

[ghost]

Since recently I was working on a Panorama project, I'll have some comment on the issues involved. I'll list it as below:

• there are some other software on mobile device to shoot Panos, apple built in pano, Occipital 360, etc. the psv xml meta data is not present in them.
• since three.js is not good at dealing with the MAX_TEXTURE_SIZE, could the new renderer has a better support on it?(especially on mobile devices). This is a problem especially when you have a 10240x5000 pano, but can only display it as a maximum of 2048x2048 on an iPhone.
• A pano picture is huge, normally larger than 1M in my case, is there a better way to cut off some loading time?
• When creating a new Panorama, I'll need to add the picture, the description texts, waypoints lat&lon, it is too tedious to write them in code, is there a good GUI to do it?

Thanks for reading & considering:)

[JeremyHeleine]

I'll begin to think that you are reading in my mind! More seriously, this is what I can answer for now.

• Since version 2.0 Photo Sphere Viewer can display other panoramas than those taken with Google's Photo Sphere (I know that the library's name can then be confusing, maybe I'll change it when I'll have a better idea). By setting the usexmpdata to false you can prevent the search for XMP data and use PSV for displaying traditional equirectangular panoramas (this is the fallback behavior if XMP data must be searched but are not found). In practice, XMP data are just useful for cropped panoramas (we need to know the original size). If your panoramas are not cropped you should be able to display them with PSV without any problem. Don't hesitate to tell me if you have any problem with some types of panoramas. ;)
• The limit in the textures size is in fact a very important problem. I already have an idea to solve this issue, but I must test it to know if it is viable. Moreover, I'll need my own renderer.
• There are essentially two critical moments which make the loading time a long time: the download of the image and the buffer creation. Currently, the second step can cause some freezes during one to two seconds in general. I should be able to prevent these freezes with my own renderer (currently it's not possible). The first step is a more delicate one. In fact, reducing the weight of a panorama is not a very good option, especially when we think about the zoom and the new virtual reality feature. The problem is, as PSV is a client-side application, I don't have any idea to reduce the download time (we don't have the image so we can't modify it). If you have one, don't hesitate to tell me.
• Yeah, the multiplication of options is a good news if we talk about features, but I know that the creation of the object is then more complex. That's why I said that you read in my mind: I'll soon begin to work on a GUI tool. It will be an external project, available as a service on my own website but also as a downloadable thing that you'll be able to install wherever you want. As I have other projects to work on, this tool won't be available in the next days but I think it can be ready for the end of the month if I haven't any problem (be sure that it will be here before the end of the year).

Thank you for your ideas!

[ghost]

Ok, to my view there are some cool ideas. I'll be glad to hear some further news, happy to share the ideas.:)

[amarok2]

Hello, I hope this project is still active !
I also would like to add waypoints and link (to another photo sphere, with transition), and the possibility to choose the waypoint to start the new image.
My knowledge is very poor to this kind of tool :-(
Hoping to have a new version soon !
Congratulations for this lines of code !
Best regards,
Nicolas

[mistic100]

You might want to check my fork http://photo-sphere-viewer.js.org/markers.html
It has clickable object on the scene (markers) and can update the image with a single method "setPanorama" http://photo-sphere-viewer.js.org/index.html#methods

[amarok2]

thank you !
i'm going to test it, i did not found (first view) the possibility to navigate thru multiple photo-sphere images... but before, i'm going to test it !
thanks again !

[mistic100]

It's not the in the demo but as I said, there is the method for that, just need to be wired to your markers (through "select-marker" event).

[Zolcsimus]

@amarok2 I'm no expert programmer but finally after 16hrs of work I put together a script that allows you to be able to setup markers, that you can change the image of, and on click would load an other 360 image in, with new markers at different location again on click would load an other 360 image. and hides the previous picture ones. Great for virtual tours.
I also included font awesome arrows on the caption bar next to the zoom buttons to be able to rotate the image up, down, left and right by clicking on them too. I'm not sure how to share that with you guys here. wish an Expert would look at it.

[amarok2]

@Zolcsimus
It should be great i think, to share your code onto this page, it will be wonderful !
I'm going to work with PSV this week-end and began to test it, sounds great !

[Zolcsimus]

@amarok2 Check this page out. I did it for my work. http://www.accessrv.com/page/360-Blue-Ridge-2910-SK-Virtual-Tour
Is this something you wanted to do?
I'm not sure if there is a better way but I use the same script that lets you place a marker anywhere you click and send the longitude and latitude to the console. That way I don't beat around the bushes when I try to place my marker. Speed up the process a bit. Also helps with angling the camera when you load the image at button click like going to bedroom in example or the bathroom. Sometimes the camera angled to the wall and you have to manually rotate it but this little trick helps with that.

[mistic100]

Could you guys continue the discussion on my fork (if there is anything to discuss) ? in order to not spam Jeremy with things he doesn't care about (meaning it's related to code he doesn't know)