0

I want to create an interactive panorama like this one:

http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html

but I want to let the user to interact with it.

Is possible to get coordinates from the texture on mouse move to create something like a 3d image map with three.js?

Thanks!

Szabo Bogdan
  • 73
  • 2
  • 11

1 Answers1

0

Check this: Translating mouse location to Object coordinates

When found triangle that ray intersects, you can gather that triangles vertices 3d coordinates and UVs. There you have enough data to calculate UV position for intersection point.

Pseudo-code:

x0 = mouse.x; y0 = mouse.y;
vec3 samplePoint = unproject(x0, y0);  // returns (x, y, near-plane-z) coords
ray.origin = camera.position;
ray.direction = samplePoint - camera.position;
var triangleComplexObj = check_for_intersections( scene, ray );  // returns triangle, it's vertices and their UV and 3d coord and intersection coord
calulateUV( triangleComplexObj , triangleComplexObj.intersectionPoint );

It's maybe a bit complex to understand but should do the trick. Hope this helps.

Community
  • 1
  • 1
Dragan Okanovic
  • 7,509
  • 3
  • 32
  • 48
  • i've done something like this but the ray caster returns an array with no value. this is my code: var samplePoint = new THREE.Vector3(x0, y0, 0); var raycast = new THREE.Raycaster(o.camera.position, samplePoint.sub(o.camera.position)); var c = raycast.intersectObject(o.mesh, false); console.log(c); – Szabo Bogdan May 08 '13 at 18:21
  • 1
    I think The reason for raycaster.intersectObject returns an empty array is because the camera is inside the sphere – Szabo Bogdan May 08 '13 at 18:48