在 WPF 中沿 x 轴旋转画布

Question

我有一个想要沿 x 轴旋转的 2D 画布。稍后我想为对象沿 z 轴的移动设置动画。

使用 CSS，沿 x 轴旋转很简单： transform: rotateX(30deg);，z 轴上的平移也是如此。

Here 演示了我想如何旋转 XAML 画布。

如何在 XAML/WPF 中实现相同的效果？我尝试使用Viewport3D 和Viewport2DVisual3D 作为应用3D 转换的起点。但是，一旦放置，画布甚至不会渲染。我不知道是否需要调整材质照明或几何形状。我应该采用的最佳方法是什么？有什么工具可以用来简化这项工作吗？

我尝试使用来自How to rotate 2D UIElement around a 3D axis (Y)? 和How to rotate 2D UIElement around a 3D axis (Y)? 的代码。我似乎无法让我的代码与画布一起使用。

编辑：

我尝试使用http://www.codeproject.com/Articles/34391/Rotating-WPF-Content-in-D-Space（“ContentControl3D 内部”部分）的代码作为起点：

<Viewport2DVisual3D>
  <Viewport2DVisual3D.Geometry>
    <MeshGeometry3D TriangleIndices="0,1,2 2,3,0" TextureCoordinates="0,1 1,1 1,0 0,0" Positions="-1,-1,0 1,-1,0 1,1,0 -1,1,0" />
  </Viewport2DVisual3D.Geometry>
  <Viewport2DVisual3D.Transform>
    <RotateTransform3D>
     <RotateTransform3D.Rotation>
        <AxisAngleRotation3D Angle="180" />
     </RotateTransform3D.Rotation>
    </RotateTransform3D>
  </Viewport2DVisual3D.Transform>
  <Viewport2DVisual3D.Material>
    <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White" />
  </Viewport2DVisual3D.Material>
  <Viewport2DVisual3D.Visual>
    <Border BorderBrush="Transparent" BorderThickness="1">
      <Canvas>
        <!-- ... -->
      </Canvas>
    </Border>
   </Viewport2DVisual3D.Visual>
</Viewport2DVisual3D>

画布不渲染。我确实尝试使用我提供的其他链接中的其他包装器，但没有运气来渲染视觉效果。

Answer 1

From this example page，添加摄像头和一些灯光（灯光可选）：

<Viewport3D>
    <Viewport3D.Camera>
        <PerspectiveCamera Position="0, 0, 4"/>
    </Viewport3D.Camera>

    <ModelVisual3D>
        <ModelVisual3D.Content>
            <DirectionalLight Color="#FFFFFFFF" Direction="0,0,-1"></DirectionalLight>
        </ModelVisual3D.Content>
    </ModelVisual3D>

    <Viewport2DVisual3D>
    ...
    </Viewport2DVisual3D>

180度的旋转角度真的很大，我觉得那是把你的边框一直向后翻转。