Next, let's talk about the interaction between the UI interface and the 3D interface. As mentioned in the previous introduction, if you want to refresh the 3D scene in UIWidgets, you need to modify the frame rate setting. Add a refresh synchronization script to the script mounted on the panel, and set the target frame rate to 60 frames.
public class ViewerApp : UIWidgetsPanel
{
protected override void OnEnable()
{
base.OnEnable();
Window.onFrameRateSpeedUp = () => { };
Window.onFrameRateCoolDown = CustomFrameRateCoolDown;
}
static void CustomFrameRateCoolDown()
{
Application.targetFrameRate = 60;
}
When you click on the scene details to enter the AR interaction, the background of the fltter will be set to be transparent. But there is a problem at this time, because the AR interactive interface that is entered by push will also have a flutter UI. If the background is set to transparent, the previous page will also be displayed. There are generally two ways to deal with this situation. One is to save what the camera sees in the 3D scene as a rendererTexture, and set the renderTextue as a background of the current interface, and refresh each frame in real time; the other way Just a trick: set the background to be transparent, the details interface and the 3D operation interface are tiled together in the same interface, when entering the details interface, only the detailed information is displayed, and the 3D interface will be superimposed on the top or right of the details. When you click to enter the 3D interaction, the entire interface moves down by the height of the interface, or moved to the left by the width of the interface.
The realization of this animation needs to use the animation controller in flutter, and configure the stack component to achieve
public class ProjectDetailScreenState : State<ProjectDetaiScreen>, TickerProvider
{
public Ticker createTicker(TickerCallback onTick)
{
return new Ticker(onTick);
}
AnimationController animationContrller;
Animation<Offset> animation;
public override void initState()
{
animationContrller = new AnimationController(
duration:TimeSpan.FromMilliseconds(300),
vsync: this
);
animationContrller.addStatusListener((status)=>
{
//if (status == AnimationStatus.completed)
//{
// animationContrller.reverse();
//}
// else if()
});
animation =new OffsetTween(begin:Offset.zero,end:new Offset(-1,0)).chain(new CurveTween(curve: Curves.linear)).animate(animationContrller);
}
//.....
}The above code snippet is to create an animation controller and add a Tween with a position offset. When the 3D interface is triggered, the position offset will be executed; when returning from the 3D interface, the reverse method will be called to reverse the bias. shift.
public override Widget build(BuildContext context)
{
return new Stack(
alignment:Alignment.center,
fit:StackFit.expand,
children:new List<Widget>()
{
new 3DInteration(animationContrller),
new Container(child:
new SlideTransition(
position:animation,
child:Detail())
)
}
);
}