Paid Project: Cube Pano, Depth Map & Image Transition

Jobs
1

Hi All,

We’re looking to create a Virtual Tour experience, with a few similar features (not exactly like them though. We don’t need a lot of what they provide, for example no need for a dollhouse view or floorplan view.

We’re mainly after a similar transition from pano to pano, depth map on the panos so that when the user mouses over a surface the mouse reacts, user clicking on a circle to move to the next pano. Ability to add tags on surfaces.

We know this is possible as we’ve seen a version of this using KRpano that we’re trying to recreate using 3JS.
https://krpano.com/releases/1.21/viewer/krpano.html?xml=examples/depthmap/abu-simbel-tempel-tour/tour.xml&initvars.editmode=true

We’ve used ChatGPT4 to write some of the code and it’s working with displaying the panos but we’re having trouble with the transition. Every time we fix an error it creates a new error. The below is the base features as per ChatGPT.

  1. 360-Degree Panorama View:
  • Utilizes THREE.CubeTextureLoader to load cubemap textures, creating an immersive 360-degree view of the environment.
  1. Depth Maps:
  • Incorporates depth maps for each cubemap to enhance the realism of the scene by providing depth-based displacement effects.
  1. Smooth Transitions:
  • Implements smooth transitions between different cubemaps using TWEEN.js. The transition is animated by updating the transitionProgress uniform in the shader.
  1. Interactive Hotspots:
  • Adds hotspots within the scene that users can click to trigger transitions to different cubemaps. These hotspots are visual indicators that guide users to new areas within the panorama.
  1. Custom Cursor with Rotation:
  • Implements a custom cursor that changes its angle based on the depth map, enhancing the interactive experience. The cursor rotation is updated in real-time based on the normal vector calculated from the depth map.
  1. User Controls:
  • Includes THREE.OrbitControls to allow users to look around the panorama. The controls enable panning and rotation but disable zooming to maintain the immersive experience.
  1. Responsive Design:
  • Adjusts the scene and camera aspect ratio dynamically on window resize, ensuring a consistent experience across different screen sizes.
  1. Error Handling and Debugging:
  • Adds shader compilation error logging to assist in debugging and ensuring shaders compile correctly.
  1. Animation Loop:
  • Uses requestAnimationFrame for a smooth and continuous rendering loop, updating the scene and handling transitions in real-time.

If anyone is interested in helping please let me know and we can discuss in more detail along with your fee. :

1 Like
2

Hi there.
I am very interesting about your project
I am three.js developer with 6+ years. I reviewed your attached link
I can satisfy all your requirement.
Kind regards.

3

Great, how can we proceed? @daniilpechkin

4

Please discuss using discord
My Discord : blueocean7335

5

I am very interested
And I can do your project in 1 week for 800usd
Please contact me
Whatsapp : +381 616330217
Skype : live:.cid.dae8bcd1e096eddc

6

With a long experience of 11+ years in application development with three.js, this is one of the topics I have focused on. I have collaborated with public agencies for the development of simulations and walkthroughs based on the “Matterport approach” in other areas, and I know the subject in depth.

You can see my collaborations to this topic in this forum in the following links

Having said that, let me comment:

  • The pipeline you mention is well laid out. If you don’t need full views (i.e. Dollhouse view) you don’t even need a 3d model, with the depth maps you have all the data required to calculate the transition.
  • Depending on how you set up the targetPoint, THREE.OrbitControls might not be the best behavior for user interaction, since there are better ways to look around without moving the camera position.
  • The logic behind using requestAnimationFrame could be made more efficient to avoid running when there is no user interaction, thus improving performance.
  • So far, what kind of problems do you still have? what kind of errors does the console throw ?

Feel free to DM
Best

7

I can help you, Let’s talk.

8

This topic was automatically closed after 30 days. New replies are no longer allowed.