Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add CSS3DRenderer for rendering clickable object in scene. #7

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add CSS3DRenderer for rendering clickable object in scene. #7

wants to merge 2 commits into from

Conversation

ghost
Copy link

@ghost ghost commented Aug 1, 2015

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.
qq 20150801211028

LYC added 2 commits July 19, 2015 20:18
…irtual tour style panorama. Introduced CSS3DRenderer to overlay on top of WebGLRenderer, for renderering waypoint marks. The click event on the marks would trigger switch scene event, and notify whomever is concerned about updating the scene. The code is therefore depend on CSS3DRenderer.js.
@JeremyHeleine
Copy link
Owner

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
Copy link
Author

ghost commented Aug 5, 2015

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
Copy link
Owner

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
Copy link
Author

ghost commented Aug 7, 2015

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

@amarok2
Copy link

amarok2 commented Sep 6, 2016

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
Copy link

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
Copy link

amarok2 commented Sep 6, 2016

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
Copy link

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
Copy link

Zolcsimus commented Sep 8, 2016

@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
Copy link

amarok2 commented Sep 9, 2016

@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
Copy link

@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
Copy link

mistic100 commented Sep 12, 2016

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants