Im using SphereMeshGenerator to create a sphere element in a WPF application.
This sphere is mapped with a media element (video).
I would like to place the camera in the middle of the sphere to get view from inside of the sphere.
Ive tried to play with camera position and direction without any success.
My knowledge about wpf and 3d are quite limited unfortunately.
So my question is, if possible, how to do it?
My goal is to emulate a video panoramic animation.
Thank you.
PS: this question has already been asked but still unanswered. See comments section here:
Link Page
Topic quite old but, as it could help other people in the same situation, i think i have to post the way to do that.
Code XAML using SphereMeshGenerator:
<Window x:Class="WpfSphereMeshGenerator.SphereMeshGeneratorMediaInto"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfSphereMeshGenerator"
Title="SphereMeshGeneratorMediaInto"
Height="300" Width="300"
Loaded="Window_Loaded">
<!-- OXYZ axis in WPF are in center of ViewPort3D-->
<Window.Resources>
<!--sphere diameter-->
<local:SphereMeshGenerator
x:Key="MySphereMeshGenerator"
Center="0 0 0"
Radius="100.0" />
</Window.Resources>
<Grid>
<Viewport3D>
<!--camera in center of ViewPort => 0,0,0-->
<Viewport3D.Camera>
<PerspectiveCamera
x:Name="Camera"
UpDirection="0,1,0"
LookDirection="-2,-2,-2"
Position="0,0,0"
FieldOfView="100" >
</PerspectiveCamera>
</Viewport3D.Camera>
<ModelVisual3D>
<ModelVisual3D.Content>
<AmbientLight
Color="White">
</AmbientLight >
</ModelVisual3D.Content>
</ModelVisual3D>
<!--ModelVisualD by default in center of ViewPort-->
<ModelVisual3D
x:Name="ModelA">
<ModelVisual3D.Content>
<GeometryModel3D
Geometry="{Binding
Source={StaticResource
MySphereMeshGenerator},
Path=Geometry}">
<!--turn sphere-->
<GeometryModel3D.Transform>
<RotateTransform3D >
<RotateTransform3D.Rotation>
<AxisAngleRotation3D
x:Name="Rotate"
Axis="0,1,0"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
</GeometryModel3D.Transform>
<!--video put on BackMaterial-->
<!--inside face-->
<GeometryModel3D.BackMaterial>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement>
<MediaElement.Triggers>
<EventTrigger RoutedEvent="MediaElement.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<MediaTimeline
x:Name="mediaTimeline"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</MediaElement.Triggers>
</MediaElement>
</VisualBrush.Visual>
</VisualBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.BackMaterial>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Grid>
<Window.Triggers>
<EventTrigger
RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Rotate"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:10"
RepeatBehavior="Forever">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
Thx to MABROUKI for the help on this one.
Related
How i can enlarge an Ellipse in WPF, preffering using Margins, just like i did in my wrong code :D ? how i can do that, you will understand from the "wrong code"
<DoubleAnimation Duration="00:00:01" Storyboard.TargetProperty="Margin" From="789,-189,762,899" To="23,-189,-4,-637"/>
http://i.stack.imgur.com/Ryn31.png
Use ThicknessAnimation instead of DoubleAnimation :)
I tried enlarging an Ellipse by altering Margin values but did not see any visual change.
I see this question already has been answered, in any case, here is an example of how it is possible to animate the height and Width of an Ellipse in WPF using markup in XAML:
<Ellipse Height="100" Width="100" Fill="Blue" Stroke="Black">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation RepeatBehavior="Forever" Storyboard.TargetProperty="Width" From="100" To="300" Duration="00:00:02" />
<DoubleAnimation RepeatBehavior="Forever" Storyboard.TargetProperty="Height" From="100" To="300" Duration="00:00:02" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
i am beginner in wpf. i got a code from a site for wpf animation. animation start when dock panel load. i want to change animation play time. i want when user click on Ellipse then animation start and when user click on dock panel then animation will stop.here is code.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<DockPanel>
<Ellipse Width="200" Height="200" Name="MyEllipse">
<Ellipse.Fill>
<RadialGradientBrush >
<GradientStop Offset="0" Color="#CCCCCCCC" />
<GradientStop Offset="0.5" Color="white" />
<GradientStop Offset="1" Color="black"/>
</RadialGradientBrush >
</Ellipse.Fill>
</Ellipse>
<DockPanel.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<BeginStoryboard Name="MyBeginStoryBoard">
<Storyboard Name="MyStoryBoard">
<DoubleAnimation Storyboard.TargetName="MyEllipse" Storyboard.TargetProperty="(Ellipse.Height)"
From="0" To="200" AutoReverse="true"
RepeatBehavior="0:0:10" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="MyEllipse" Storyboard.TargetProperty="(Ellipse.Width)"
From="0" To="200" AutoReverse="true"
RepeatBehavior="0:0:10" BeginTime="0:0:0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DockPanel.Triggers>
</DockPanel>
</Grid>
Change the RoutedEvent to PreviewMouseDown instead of Page.Loaded.
EDIT :
You can stop the animation by adding this trigger to the DockPanel.Triggers:
<EventTrigger SourceName="MyEllipse" RoutedEvent="Ellipse.PreviewMouseDown">
<StopStoryboard BeginStoryboardName="MyBeginStoryBoard" />
</EventTrigger>
This will let you stop the animation by clicking on the Ellipse.
See MSDN for samples on pause/resume etc.
I've created a simple user control in WPF and added an image to it:
<Image x:Name="logo" Source="/View/Images/Logo.png" Width="100" Height="100">
<Image.RenderTransform>
<RotateTransform Angle="0" CenterX="50" CenterY="50" />
</Image.RenderTransform>
</Image>
I want that image to spin constantly and to fade in and out. This is to be used as a busy indicator. So I created this animation storyboard:
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation From="0" To="360" Duration="00:00:05" Storyboard.TargetName="logo" Storyboard.TargetProperty="(RotateTransform.Angle)" />
<DoubleAnimation From="0.1" To="1" AutoReverse="True" Duration="00:00:02" Storyboard.TargetName="logo" Storyboard.TargetProperty="Opacity" />
</Storyboard>
However, when I view a window with the usercontrol in it, the fading works but the spiinning doesn't.
Your StoryBoard.TargetProperty is wrong, it should be:
Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
I'm struggling to get a PropertyPath to work - I've got a Transformation in the Window Resources that I'm trying to affect via a StoryBoard - also in Window Resources ...
Heres the property path i'm using ...
(Viewport2DVisual3D.Transform).(Transform3DGroup)[0].(RotateTransform3D).(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)
EDIT: Thanks to Anurags suggestion I've got a bit further ...
(Viewport2DVisual3D.Transform).(Transform3DGroup.Children)[0].(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)
but now it errors with "Rotation property does not point to a DependencyProperty"
Can anyone please put me back on track?
Heres the code in full ...
<Window
x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<Window.Resources>
<Transform3DGroup x:Key="WorldTranslation">
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="0,1,0" Angle="0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Transform3DGroup>
<Storyboard x:Key="MyStoryboard">
<DoubleAnimation
Storyboard.Target="{Binding TemplatedParent}"
Storyboard.TargetProperty="(Viewport2DVisual3D.Transform).(Transform3DGroup.Children)[0].(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)"
From="0.0" To="360" Duration="0:0:1" />
</Storyboard>
<MeshGeometry3D
x:Key="squareMeshFrontLeft"
Positions="-1,-1,1 1,-1,1 1,1,1 -1,1,1"
TriangleIndices="0 1 2 0 2 3"
TextureCoordinates="0,1 1,1 1,0 0,0" />
<DiffuseMaterial x:Key="visualHostMaterial" Brush="White" Viewport2DVisual3D.IsVisualHostMaterial="True" />
</Window.Resources>
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="0,0,10" LookDirection="0,0,-1" />
</Viewport3D.Camera>
<Viewport2DVisual3D Material="{StaticResource visualHostMaterial}" Geometry="{StaticResource squareMeshFrontLeft}" >
<Viewport2DVisual3D.Transform>
<StaticResource ResourceKey="WorldTranslation" />
</Viewport2DVisual3D.Transform>
<StackPanel Background="Blue" Width="80" Height="80">
<Button Height="30" Margin="20">
<Button.Content>Blah</Button.Content>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource MyStoryboard}" >
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Viewport2DVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<AmbientLight Color="White" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Window>
First of all, instead of DoubleAnimation, use 3D KeyFrame Animation.
and correct your StoryBoard.TargetProperty's syntax using (Transform3DGroup.Children) instead of
check this also:
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/78170274-a585-4cd6-85ed-edfd655d34ab
I've got a KeyFrame Animation storyboard and a separate rotation transformation in my Window.Resources.
The rotation transformation works as I can alter the angle and see the content rotate. I know the storyboard is being called, because it took me a few goes to get the PropertyPath right after I clicked on the button.
However now it does nothing - no error, but no rotation either!
Can anyone help please?
Thanks,
Andy
<Window
x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="400">
<Window.Resources>
<Storyboard x:Key="myStoryboard">
<Rotation3DAnimationUsingKeyFrames
Storyboard.Target="{Binding TemplatedParent}"
Storyboard.TargetProperty="(Viewport2DVisual3D.Transform).(RotateTransform3D.Rotation)" >
<Rotation3DAnimationUsingKeyFrames.KeyFrames>
<LinearRotation3DKeyFrame KeyTime="0:0:1">
<LinearRotation3DKeyFrame.Value>
<AxisAngleRotation3D Axis="0,1,0" Angle="0" />
</LinearRotation3DKeyFrame.Value>
</LinearRotation3DKeyFrame>
</Rotation3DAnimationUsingKeyFrames.KeyFrames>
</Rotation3DAnimationUsingKeyFrames>
</Storyboard>
<RotateTransform3D x:Key="myRotateTransform3D" >
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="0,1,0" Angle="30" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
<!-- Front, left square -->
<MeshGeometry3D
x:Key="squareMeshFront"
Positions="-1,-1,1 1,-1,1 1,1,1 -1,1,1"
TriangleIndices="0 1 2 0 2 3"
TextureCoordinates="0,1 1,1 1,0 0,0" />
<!-- Bottom -->
<MeshGeometry3D
x:Key="squareMeshBottom"
Positions="-1,-1,1 1,-1,1 1,-1,-1 1,1,-1"
TriangleIndices="0 1 2 0 2 3"
TextureCoordinates="0,1 1,1 1,0 0,0" />
<DiffuseMaterial x:Key="visualHostMaterial" Brush="White" Viewport2DVisual3D.IsVisualHostMaterial="True" />
</Window.Resources>
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="0,0,9" LookDirection="0,0,-1" />
</Viewport3D.Camera>
<Viewport2DVisual3D Material="{StaticResource visualHostMaterial}" Geometry="{StaticResource squareMeshFront}" Transform="{StaticResource myRotateTransform3D}" >
<StackPanel Background="Blue" Width="120" Height="80">
<Button Height="30" Margin="20">
<Button.Content>Click Me</Button.Content>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource myStoryboard}" >
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Viewport2DVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<AmbientLight Color="White" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Window>
The problem is in Storyboard.Target="{Binding TemplatedParent}". Give a name to Viewport2DVisual3D control: <Viewport2DVisual3D x:Name="vp" .../>, and set Storyboard.TargetName="vp" instead of what you have...
Cheers