Yashwant Raut
Yashwant Raut

Reputation: 39

How to accurately align panoramic images with a 3D model at hotspot locations in Three.js?

I am working on creating a 360° virtual tour where panoramic images should seamlessly integrated with a 3D model.

Here’s the workflow: The user clicks a hotspot.(PRESS m key) The camera moves to the hotspot's position in the 3D model. The view switches to a spherical panorama view where the user can freely rotate the camera in 360 degrees.

My requirement I want panorama image overlay on 3d model correctly.

What I have done

Created a sphere and applied texture(panorama image on that sphere) Sphere position set at hotspot position as this the place where panorama was capture.

function createSphereAndLoadPano() {
  let texturePath = 'https://i.imgur.com/wJeAbfa.jpeg';

  const textureLoader = new THREE.TextureLoader();
  const panoramaTexture = textureLoader.load(texturePath);

  const panoMaterial = new THREE.MeshBasicMaterial({ map: panoramaTexture });

  const sphereGeometry = new THREE.SphereGeometry(500, 60, 40);
  sphereGeometry.scale(-1, 1, 1);
  const panoSphere = new THREE.Mesh(sphereGeometry, panoMaterial);

  panoSphere.up.set(0, 0, 1);
  panoSphere.rotateX(Math.PI / 2);
  let rad = THREE.MathUtils.degToRad(90);
  panoSphere.rotateY(rad);
  let vecPos = new THREE.Vector3(101.02, 97.17, 4.35);

  panoSphere.position.copy(vecPos);

  scene.add(panoSphere);
}

Here’s the live demo :Demo Press m key to move and activate the pano mode.

I have done hardcoded manipulation to rotate the sphere to set alignment but this does not work well

I want to know.

What are the standard techniques and considerations for accurately aligning 360° panoramic images with a 3D model at specific hotspot locations in a virtual tour?

Upvotes: 0

Views: 42

Answers (0)

Related Questions