Skip to main content
A
aletenti12-Amethyst
12-Amethyst
December 1, 2023
Question

3D panel disappear effect

  • December 1, 2023
  • 2 replies
  • 3604 views

Hello community,

I'm trying to simulate a fade effect on a 3D panel for Hololens in Vuforia Studio, I have seen it in a Demo for which I don't have the project code.

 

I have tried to create an $interval in the JS code that every 200ms decreases the height and width properties until the minimum (0.04), but it doesn't work because the only element that decreases is the "pin/unpin" button, but the panel remains the same.

 

Do you have any idea or suggestion?

 

Thanks 

2 replies

P
Pawel_D.10-Marble
10-Marble
December 4, 2023

I made some models animations like fade in and fade out, using tween js. There are many use cases, like simple movements, user interface animations etc. It is a little tricky but there are many examples around to have a look.

A
aletenti12-AmethystAuthor
12-Amethyst
December 4, 2023

Hi Pawel, thanks! I'll take a look!

Meanwhile, do you already have a simple example to share?

P
Pawel_D.10-Marble
10-Marble
December 4, 2023

Yes, I can share a short example.

In this code, opacity of "menu" widget, which is a 3D model of a panel with buttons, labels etc. is changed from 1 to 0 and from 0 to 1 in 1600 ms. During this time, all the widgets on a "menu" are rearranged. You have to connect animation_1 and animate functions to some button "click" event.

 

var start_1 = { a: 1};

$scope.animation_1 = function() {

var onUpdate_1 = function() {
 $scope.$apply();
 $scope.view.wdg['menu'].opacity = start_1.a;
}
tween_one = new TWEEN.Tween ( start_1 )
.to( { a: 0} , 800)
.easing(TWEEN.Easing.Linear.None)
.onUpdate( onUpdate_1)

tween_two = new TWEEN.Tween ( start_1 )
.to( { a: 1} , 800)
.easing(TWEEN.Easing.Linear.None)
.onUpdate( onUpdate_1)
tween_one.chain(tween_two);
tween_one.start();
}

$scope.animate = function(time) {
requestAnimationFrame($scope.animate);
TWEEN.update(time);
}

 

 

    R
    rabernathy12-Amethyst
    12-Amethyst
    December 5, 2023

    I created the Howden demo that has the effect you are talking about.  You can't create that effect using the height and width properties.  It has to be done with scale.  DO NOT use opacity to try to recreate this effect since opacity changes on the HL2 are very costly from a performance standpoint and will likely cause you to lose framerate during the execution of the effect.   As someone said in one of the replies, this is really a tweening function.

     

    This demo was created before the ootb menu panels were created so it uses a custom model for the backplate and the ootb original 3d buttons.  This is paired with custom tethering code (remember this was before the ootb menu panels were created).

     

    To do this yourself, you would create a function that uses requestAnimationFrame to recursively change the scale by 0.1 every iteration.  For scale in (turning the menu on), you set the menu to the lowest number (I used 0 in that demo but it really doesn't need to go all the way from 0 to 1, 0.5 to 1 is more than enough for the user to know what's happening). and add 0.1 to the scale value until you hit 1.  For scale out (turning the menu off), you start at a scale of 1 and subtract by the 0.1 increments until you hit the number where you want to turn the menu off.  After the scale out function completes and the menu is off, I set the scale back to 1 just in case someone turns the menu on without using the scale in function.

     

    It's also important not to use interval for this, especially if your framerate isn't 60fps.  If your framerate drops, using interval can lead to the menu transition looking like it's jerking, using requestAnimationFrame ties this to the browser refresh so it helps with performance and also make this asynchronous so it will adapt automatically to framerate changes.  Another key point is that I turn the buttons off before the scaling starts to make sure that the user can't press a button while the effect is running.

      A
      aletenti12-AmethystAuthor
      12-Amethyst
      December 5, 2023

      Hi,

      thank you for all this information! Really appreciated.

      Which custom model did you use? Is it something shareable? If not, do you have any suggestion on how I can create a custom model for HL2?

      And also, do you have any example code of how I can use the requestAnimationFrame function?

       

      Thanks in advance ðŸ˜Š 

      R
      RolandRaytchev21-Topaz I
      21-Topaz I
      December 5, 2023

      Hi @aletenti,

      the code suggested by @Pawel_D.  is cool and easy to use. Here an example changing some properties of the 3D panel widget in the HL based on that what @Pawel_D.  suggested (click on the 3D image widdget for the action) . Thanks!

      Terms & ConditionsCookie settingsAccessibility statement