Tutorial / Example - a Floor-hotspot at the Mouse-position

klaus.krpano

Hi,

I have seen several times examples that try to make a 'floor-hotspot' that automatically moves with the mouse position - and often this seems to be done by using spherical coordinates and some tricky rotations, but that typically results in a not correct looking perspective of the hotspot.

Here a more correct and still very simple solution:

The hotspot will be '3d-placed' by the tx,ty,tz coordinates (and not by the spherical ath/atv/depth coordinates) and will be defined to be always be parallel-rotated to the floor.
A custom 'floor-height' will be manually defined. That can be individual for each pano and would be the height of the camera when shooting the pano.
Then to get the 3d position for the floor hotspot:
- First get the spherical position at the mouse position using the screentosphere action.
- Then convert that spherical position to a 3d unit/direction vector using the spheretospace action with depth=1.
- Then scale that vector to hit the floor - simply by scaling the unit-vector by the factor 'floorheight/unit-vector-y'.

Here as code:

Code

set(floorheight, 160);
screentosphere(mouse.x,mouse.y, h,v);
set(d,1);
spheretospace(h,v,d, x,y,z);
calc(hotspot[name].tx, x*floorheight/y);
calc(hotspot[name].tz, z*floorheight/y);
copy(hotspot[name].ty, floorheight);

This are only a few code-lines and will result it a correctly placed hotspot in 3d space and will look good from all viewing angles.

Additionally having the correct 3d position allows doing other nice things,

e.g. automatically rotating the hotspot into the target direction,
changing the alpha depending on the distance,
or even moving toward the point in 3d-space, but that one would be only useful for depthmapped panos.

Here a full example:
https://krpano.com/releases/1.20.…mouse-position/

And here the example source:
https://krpano.com/viewsource.htm…pot-example.xml

Best regards,
Klaus

Tuur

jeromebg

Great, thanx Klaus !

gaptat

Thank you Klaus, this is awesome, any chance to get the multiple texture support for Obj files too, please?
Regards.

Tuur

Hi,

i was playing a bit and have a question.

I like the floor hotspot to point (rotate) to the ath position of the center of the/a polygonal hotspot.
I tried quite some, getcenter stuff etc..
No..succes..
perhaps i made a stupid mistake (obviously).. or just am/was on the wrong path.

https://www.virtualtuur.com/krpano/120/help/floorhotspot/1/
https://www.virtualtuur.com/krpano/120/hel…spot/1/tour.xml

Tuur

klaus.krpano

Zitat von Tuur

I like the floor hotspot to point (rotate) to the ath position of the center of the/a polygonal hotspot.

Here a second example for such:
https://krpano.com/releases/1.20.…t-example-2.xml

The example source:
https://krpano.com/viewsource.htm…t-example-2.xml

Tuur

master ..

thank you!
in my case it's not a door.. though.. let me sleep on that.. i think to know where you hint for

Tuur

Eric Chen

A great demo!
Could it be possible to go one step further, such as showing up on surfaces with depth information?

klaus.krpano

Zitat von juyatu

Could it be possible to go one step further, such as showing up on surfaces with depth information?

Not yet, but with one of the next releases.

Eric Chen

Zitat von klaus.krpano

Not yet, but with one of the next releases.

That's great.I'm looking forward to it.

In addition, if the virtual scene panorama is rendered through the model, theoretically there is no need to draw the additional model, because it carries depth and camera information.Is it possible to develop a tool that generates model files directly from 3DMax or Blender without relying on EverPano?This saves a lot of tedious and repetitive work.

Bax

Zitat von klaus.krpano

Not yet, but with one of the next releases.

Hello Sir,

It is not yet possible right? or no update yet?

Thanks for the response.

hamideh_1993

Excellent
It is possible to walk on floor in 360 photo whit this example?

danavon

TOP!! Thanks Klaus!!
DP

indexofrefraction

hi klaus,

if you combine this with the dollhouse example and http://view.ox/y/z gets set,
the hotspot doesn't move in sync with the mouse anymore
would you have a tip here?

best, index

edit... the documentation says about http://view.ox/y/z :
" An additional 3D translation offset of the viewpoint.
But the viewing rotation will be still from the non-offset point. "
so to find the effective/true position in 3d space we would need to
rotate the http://view.ox/y/z vector by hlookat/vlookat and add this vector to http://view.tx/y/z ?

indexofrefraction

here a small sampler showing the problem
the view offset (oz) is not taken in account

Code

<krpano>
	<action name="place_floorspot_at_mouse_pos" scope="local">
		set(d, 1);
		asyncloop(caller.loaded,
			screentosphere(mouse.x, mouse.y, h, v);
			spheretospace(h, v, d, x, y, z);
			calc(fh, caller.floorheight_cm - view.ty);
			calc(x, x * fh / y);
			calc(z, z * fh / y);
			set(caller,
				tx=calc(view.tx + x),
				tz=calc(view.tz + z),
				ty=calc(view.ty + fh)
			);


			// optionally rotate the hotspot toward the target direction (e.g. for image-arrow-spots):
			// calc(caller.ry, atan2(x, z) * 180 / Math.PI);


			// optionally fade out the spot when too far away:
			// calc(distance, sqrt(x * x + z * z));
			// calc(caller.alpha, distance LT 1000 ? 1.0 : 1.0 - (distance - 1000) / 100);
		);
	</action>


	<preview type="grid()"/>
	<image oy="calc:hotspot[floorspot].floorheight_cm - 1000" />
	<hotspot name="floorspot" devices="mouse" type="text" html="" css="font-size:80px;text-align:center;" vcenter="true" width="200" height="200" scale="0.2" bgalpha="0.5" bgroundedge="100" bgborder="2 0x000000 1" bgshadow="0 0 5 0xFFFFFF 1.0" oversampling="2" mipmapping="true" zorder="1" distorted="true" depth="0" depthbuffer="true" torigin="world" rotationorder="xyz" rx="-90" capture="false" handcursor="false" autoalpha="true" floorheight_cm="250" onloaded="place_floorspot_at_mouse_pos();" onclick="tween(view.tx, get(tx)); tween(view.tz, get(tz));"/>
	<style name="button" type="text" css="text-align:center;" padding="4 8" mergedalpha="false" bgborder="0 0xFFFFFF 1" bgroundedge="1" bgshadow="0 1 4 0x000000 1.0" ondown="set(bgcolor, 0xDDDDDD);" onup="set(bgcolor, 0xFFFFFF);" />
	<layer name="dollhouse" style="button" html="Dollhouse" width="80" align="bottom" y="50" onclick="dollhouse_toggle();" />


	<action name="dollhouse_toggle">
		if(!control.invert,
			copy(hl, view.hlookat);
			copy(vl, view.vlookat);
			copy(fv, view.fov);
			lookto(270, 50, 90, default, true, true);
			tween(view.oz, 1200);
			set(control.invert, true);
		,
			lookto(get(hl), get(vl), get(fv), default, true, true);
			tween(view.oz, 0);
			set(control.invert, false);
		);
	</action>
</krpano>

Alles anzeigen

klaus.krpano

Hi,

just as quick note - in version 1.20.11 support for dollhouse views was added.
The links in the first post were updated accordingly.

Best regards,
Klaus

ramirox3

Hi Klaus
Is it possible to override or limit the action of the floor hotspot
when approaching the edge of the panorama and thus prevent the
panorama from disappearing when the last wall is clicked?
and the panorama does not disappear?
Ramiro

Suso Barral

How to see Floor-hotspot at the Mouse-position on a mobile?

onover="set(hotspot[floorspot].visible, false);"
onout="set(hotspot[floorspot].visible, true);"

does not work on mobiles, any other option?

don't walk through walls:

https://dearte.online/nav/

Suso Barral

Zitat von ramirox3

Hi Klaus
Is it possible to override or limit the action of the floor hotspot
when approaching the edge of the panorama and thus prevent the
panorama from disappearing when the last wall is clicked?
and the panorama does not disappear?
Ramiro

https://dearte.online/nav/

Suso Barral

Zitat von klaus.krpano

Here a second example for such:
https://krpano.com/releases/1.20.…t-example-2.xml
The example source:
https://krpano.com/viewsource.htm…t-example-2.xml

https://dearte.online/poly/

it is possible to limit the navigation with a polygonal hotspot on the ground, that is to say that the navigation remains active only for the area defined by the polygonal hotspot?

Best
Suso

Jetzt mitmachen!