I’m using Potree (http://potree.org/) to strem pointclouds on a web browers.
I’m trying to add “photo spheres” with three.js to create a user interface like this one
The project is to create clickables spheres with three.js, with a click trigger that moves the camera to the center of this sphere. Then, show a 360° draggable photo and move the synchronize the three.js camera target with the view of the panorama.
Does anyone has any idea of how-to proceed ?
Thanks a lot. Have a good day.
Hi i’m facing the same trouble did u fixed it or not yet i need your help to do know how to do it too
One way to do it could be to load the equirectangular images on the globe as texture and update the background when the spheres are clicked.
Can you explain to me more in fact i didn’t get your idea i’m a beginner in potree
It doesn’t have to do anything potree as such. It can exist in conjunction with potree in your scene. I haven’t used Potree myself and can’t comment much about it.
The sphere and background logic is separate from Potree and I don’t think there’ll be issues making it work as shown in the video.
For the image to look correct (360 view) he idea is to use the same image and have it be correctly displayed at 2 locations - the globes which would be used for selection and the background in the environment.
In the sample above a
SphereGeometry (line 77) is used to represent the globe and a
BoxBufferGeometry(line 141) is used for the background. You could use other ways of doing this which might be better/worse for different reasons.
One thing that has to be common is the image we use. It has to map to the sphere and the box in a consistent manner to get the image to show correctly on the clickable sphere and the background.
For that an equirectangular image is used since the it maps correctly by default with the threejs spheres and we make the box material such that it renders equirectangular images in a way that it looks correct (lines 133-140).
In addition it might be better to hide the Potree object when you are in 360 viewing mode.