On touch Animation

gputhige

Trainee

Posts: 53

Location: Bangalore, India

Occupation: 3D Studio

1

Thursday, April 5th 2018, 10:46am

Hi
I currently use KRPano extensively in the 3D Architectural Visualization and am quite happy with the same. We are now getting requests from our customers if it is possible to incorporate animation into the scene .. say on Mouse Click/Touch.

The request is to show collapsible furniture of the interiors in the Pano. Say on touch, the Sofa in the Living room converts to a Bed with the animation of the same. We currently use two separate renders like before and after - of the Sofa converted to Bed. But this lacks the WOW factor in it. Just wondering if using three.js, this could be made possible.

Any inputs/feedback is welcome.

Regards
gputhige

Go to the top of the page

spacerywirtualne

Professional

Posts: 1,117

Location: Poland, Europe

Occupation: krpano developer : virtual tours : the cms4vr owner

2

Thursday, April 5th 2018, 11:08am

Hi

You can easily do this by working on hotspots.

https://krpano.com/examples/119/krpano.h…xtract/pool.xml

https://krpano.com/examples/119/krpano.h…active-area.xml

Examples of the code you have in the zip package krpanotools.

Best regards
Piotr

Your own professional, online cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

3

Thursday, April 5th 2018, 11:29am

Hi,

or do you mean something like this:
https://krpano.com/temp/kitchendooranimation/
https://krpano.com/temp/washerdooranimation/

Best regards,
Klaus

Go to the top of the page

jordi

Professional

Posts: 583

Location: Barcelona

Occupation: creating ideas & coding them

4

Thursday, April 5th 2018, 12:59pm

Nice one Klaus! *thumbup*

everpano.com step beyond 360

Go to the top of the page

Satya.Teja

Beginner

Posts: 6

Location: Planet Earth

Occupation: Web Developer

5

Thursday, April 5th 2018, 1:42pm

Quoted from "klaus.krpano"

Hi,

or do you mean something like this:
https://krpano.com/temp/kitchendooranimation/
https://krpano.com/temp/washerdooranimation/

Best regards,
Klaus

where can i find the code for the same.
is there documentation for this.? *smile*

Go to the top of the page

dreamcutter

Trainee

Posts: 56

Location: Moscow

6

Thursday, April 5th 2018, 4:06pm

where i can find the entire list of such demo-examples? :)

Quoted from "klaus.krpano"

Hi,

or do you mean something like this:
https://krpano.com/temp/kitchendooranimation/
https://krpano.com/temp/washerdooranimation/

Best regards,
Klaus

Go to the top of the page

gputhige

Trainee

Posts: 53

Location: Bangalore, India

Occupation: 3D Studio

7

Thursday, April 5th 2018, 4:42pm

On touch Animation

Quoted from "klaus.krpano"

Hi,

or do you mean something like this:
https://krpano.com/temp/kitchendooranimation/
https://krpano.com/temp/washerdooranimation/

Best regards,
Klaus

Klaus,
this is exactly what I was looking for *smile*

Absolutely amazing that the solution is already there. Could I get a documentation for this ?

Regards
Gputhige

Go to the top of the page

$indexofrefraction is offline$ indexofrefraction

Professional

Posts: 1,362

8

Thursday, April 5th 2018, 5:20pm

for the xml check the url !
*whistling*

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Go to the top of the page

Tuur

Sage

Posts: 3,839

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

9

Thursday, April 5th 2018, 5:38pm

Nice to see it with new code.
A nice feature/effect.
Don't use it that much though..
When we did something like this 5-6 years ago it was a bit more of a struggle, also because coding scales where not as they are now... haha

Tuur *thumbsup*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Go to the top of the page

gputhige

Trainee

Posts: 53

Location: Bangalore, India

Occupation: 3D Studio

10

Thursday, April 5th 2018, 7:16pm

On touch Animation

Quoted from "indexofrefraction"

for the xml check the url !

I was able to download the images and the js/html file. However, I am not able to download the xml file. Is there a directory I can log into to view this?

Regards
Gputhige

Go to the top of the page

Tuur

Sage

Posts: 3,839

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

11

Thursday, April 5th 2018, 7:29pm

Hi,

here:
https://krpano.com/temp/kitchendooranimation/krpano.xml
and here:
https://krpano.com/temp/washerdooranimat…chmaschinen.xml

then 'show source code', or so, of browser, select all copy -->

or

save page as xml of course ;-)

Tuur

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Go to the top of the page

gputhige

Trainee

Posts: 53

Location: Bangalore, India

Occupation: 3D Studio

12

Thursday, April 5th 2018, 7:35pm

On touch Animation

Thanks Tuur

Downloaded it.

Regards
Gputhige

Go to the top of the page

$indexofrefraction is offline$ indexofrefraction

Professional

Posts: 1,362

13

Thursday, April 5th 2018, 7:36pm

there is chicken in that fridge?
your dinner, klaus?
*tongue*

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

14

Thursday, April 5th 2018, 9:08pm

Hi,

Quoted from "gputhige"

Could I get a documentation for this ?

There is no special documentation here - the basic idea is to use several hotspots as image-frames and changing their visibility for the animation.

The hotspots could be created this way:
https://www.krpano.com/forum/wbb/index.p…38120#post38120

and the how to toggle the visibility depends on what exactly should happen - e.g. setting the current visible frame depending on the mouse-position or just running an animation on click...

These both examples are already pretty old - here the source threads about them:
https://krpano.com/forum/wbb/index.php?p…d&threadID=2253
http://www.panorama-forum.net/wbb/index.…d&threadID=9287

Best regards,
Klaus

Go to the top of the page

gputhige

Trainee

Posts: 53

Location: Bangalore, India

Occupation: 3D Studio

15

Friday, April 6th 2018, 1:17am

On touch Animation

Thanks Klaus
Will try these.

Regards
Gputhige

Go to the top of the page

gputhige

Trainee

Posts: 53

Location: Bangalore, India

Occupation: 3D Studio

16

Saturday, April 7th 2018, 11:09am

On touch Animation

Quoted from "klaus.krpano"

These both examples are already pretty old - here the source threads about them:
https://krpano.com/forum/wbb/index.php?p…d&threadID=2253

Hi Klaus
I have been able to create the animation as per the above link successfully. Thanks for the same. Just needed to know as to how I can arrive at the ath and atv values as below:

<point ath="-131.458067" atv="25.599499" />
<point ath="-131.828052" atv="-2.053670" />
<point ath="-109.998341" atv="-2.265504" />
<point ath="-109.712672" atv="25.576724" />
<point ath="-122.772160" atv="26.351086" />

Regards
Gputhige

Go to the top of the page

Mael B.

Trainee

Posts: 157

Location: France, Montpellier

17

Saturday, April 7th 2018, 1:10pm

Quoted from "Tuur"

Nice to see it with new code.
A nice feature/effect.
Don't use it that much though..
When we did something like this 5-6 years ago it was a bit more of a struggle, also because coding scales where not as they are now... haha

Tuur

I'm also happy to see that this kind of effect is still sometimes used *smile*

I think that the use of hotspot to dynamically change a part of the panorama begins 8 years ago actually, and I agree that it was quite complicated and challenging at this time *g*

http://photo.maelbathfield.net/chrono-panorama/
(sorry, i did not convert this example in a html5 compatible version... so flash required)

http://photo.maelbathfield.net/

Go to the top of the page

bbm

Beginner

Posts: 12

18

Tuesday, April 10th 2018, 2:12pm

SVG animation

Hi everyone!

What about SVG animation? This option has a great opportunities!
Is this possible to use .svg files or <svg> code as source for layer in krpano DOM three and then to manipulate some parameters? For this moment only in-code animation work (CSS and SMIL). Animated layer with .svg file looks like behind the glass. But it would be great if we could set and edit it dinamically. Other words, create and animate svg by code and CSS on some user events, like 'click', 'hover' etc.
Thanks!

This post has been edited 2 times, last edit by "bbm" (Apr 10th 2018, 3:26pm)

Go to the top of the page

On touch Animation

On touch Animation

On touch Animation

On touch Animation

On touch Animation

On touch Animation

SVG animation

Similar threads