`
gstarwd
  • 浏览: 1538788 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Using projection to build a 3D carousel in Silverlight 3

阅读更多
http://www.silverlightbuzz.com/2009/06/12/using-projection-to-build-a-3d-carousel-in-silverlight-3/
<!-- /nav -->
<script type="text/javascript">&lt;!-- google_ad_client = &quot;pub-8333256540030241&quot;; /* 468x15, created 11/13/09 */ google_ad_slot = &quot;6101684395&quot;; google_ad_width = 468; google_ad_height = 15; //--&gt; </script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script><script src="http://pagead2.googlesyndication.com/pagead/expansion_embed.js"></script><script src="http://googleads.g.doubleclick.net/pagead/test_domain.js"></script><script>google_protectAndRun(&quot;ads_core.google_render_ad&quot;, google_handleError, google_render_ad);</script> 
   
<script type="text/javascript">&lt;!-- google_ad_client = &quot;pub-8333256540030241&quot;; /* 300x250, created 11/15/09 */ google_ad_slot = &quot;2868923228&quot;; google_ad_width = 300; google_ad_height = 250; //--&gt; </script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script><script>google_protectAndRun(&quot;ads_core.google_render_ad&quot;, google_handleError, google_render_ad);</script>

In the below example I used the new projection properties in Silverlight 3 to build a 3D image carousel. Moving the mouse left to right controls the speed and direction of the carousel. Moving the mouse up and down changes the opacity of the carousel, allowing you to see what is going on behind the carousel.

Please upgrade your browser

The ‘how to’ bit

To start with I have placed 6 images inside Blend and used the projection properties to offset them against each other to form a 3 dimensional hexagon. I do this by changing 2 projection properties:

CenterOfRotationZ=”-173″

RotationY=”60″

I use the ‘CenterOfRotationZ’ value to move the center point away from each image plane. This value needs to be the same on each of the 6 images I use in order to get them to match up at the edges. I then use the ‘RotationY’ value to change the angle of each image, as I have 6 images each image is rotated by a factor of 60 degrees (6 x 60 = 360 degrees).

I then place an x:Name on each images projection tag as seen in the below example:

<PlaneProjection x:Name=”Image1Projection” CenterOfRotationZ=”-173″ RotationZ=”0″/>

This will allow me to easily change the angle of each image dynamically in the C#.

In the C# I set up a listener to monitor the mouse movement and store the values in ‘pt’:

void LayoutRoot_MouseMove(object sender, MouseEventArgs e)

{

pt = e.GetPosition(LayoutRoot);

}

Next I set up a CompositionTarget.Rendering function so that I can update my 3 dimensional carousel constantly. I use the mouse X co-ordinates to change the speed and direction of the carousel and the mouse Y value to change the opacity:

void CompositionTarget_Rendering(object sender, EventArgs e)

{

Image1Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;

Image2Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;

Image3Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;

Image4Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;

Image5Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;

Image6Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;

image1.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;

image2.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;

image3.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;

image4.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;

image5.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;

image6.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;

}

Grab the code

As always you can grab the code source here .

 

written by Gavin Wignall \\ tags: 3D , C# , Carousel , Direction , Effects , Expression Blend , Fun , Mouse position , Rotation , Silverlight 3 , tutorial , XAML

<!-- /entry --> <!-- Pings -->

3 Pings to “Using projection to build a 3D carousel in Silverlight 3”

  1. Shadow effect using 3D projection in Silverlight 3 » Says:

    [...] Using projection to build a 3D carousel in Silverlight 3 [...]

  2. Creating a 3D cube with images in Silverlight 3 » Says:

    [...] Resource Using projection to build a 3D carousel in Silverlight 3 Shadow effect using 3D projection in Silverlight [...]

  3. progg.ru Says:

    Using projection to build a 3D carousel in Silverlight 3 »…

    Thank you for submitting this cool story – Trackback from progg.ru…


<!-- You can start editing here. -->

5 Responses to “Using projection to build a 3D carousel in Silverlight 3”

  1. 1. Mike Says:

    Hey, great post, really well written. You should post more about this.

  2. 2. GUSTAVO Says:

    how i do to select one image ?

  3. 3. Gavin Wignall Says:

    I have not written in the functionality to select the items in the carousel, but it is not that difficult. Each image is able to be treated as a button like any other normal image.

  4. 4. Katarina Says:

    Hello! Love your demo!

    I used UserControls instead of images, they appear correctly in Blend but when I run the application they won`t rotate.
    It works fine with an image control or grid control.

    How do I get to rotate my UserControls also?
    What am I missing?
    Please help out!

    Thanks in advance!

    Katarina

    Here is a short code of my example…

    MAIN PAGE XAML

    MAIN PAGE CODE BEHIND

    public MainPage()
    {
    // Required to initialize variables
    InitializeComponent();
    ucProj1 = new PlaneProjection();
    ucProj2 = new PlaneProjection();
    ucProj3 = new PlaneProjection();
    ucProj4 = new PlaneProjection();
    }

    private void UserControl_Loaded(object sender, RoutedEventArgs e)
    {
    ucProj1.RotationY = 60;
    ucProj2.RotationY = 120;
    ucProj3.RotationY = 180;
    ucProj4.RotationY = 240;
    LayoutRoot.MouseMove += new MouseEventHandler(LayoutRoot_MouseMove);
    CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
    }

    void CompositionTarget_Rendering(object sender, EventArgs e)
    {
    ucProj0.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
    ucProj1.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
    ucProj2.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
    ucProj3.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
    ucProj4.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
    ucProj5.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
    }
    private Point pt;
    void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
    {
    pt = e.GetPosition(LayoutRoot);
    }

    USER CONTROL with a grid

    <UserControl

    …..
    …….

  5. 5. jairoxxx Says:

    the function to get “-173″ is:

    double getApothem(double height, double sides)
    {
    var x0 = 360.0 / (2 * sides);
    var k = Math.Sin(Math.PI * x0 / 180.0);
    var r = (double)(height / 2) / k;
    return – Math.Sqrt((r * r) – Math.Pow((double)height / 2, (double)2));
    }

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

<!-- /post -->
<!-- /content -->
Free WordPress Theme designed by N.Design Studio , customized by MangoOrange™
Supported By: Web Hosting Reviews , Hosting in Columbia, and Web Hosting
<!-- /left-col -->
分享到:
评论

相关推荐

    3D投射 silverlight 3D投射

    在Silverlight中,可以通过设置Viewport3D的Camera类的Projection属性为OrthographicCamera来实现正交投影。 2. 广角投影(Perspective Projection):模拟人眼观察物体的方式,离观察点近的物体显得大,远的物体...

    3DMAX几何投影插件Geometry Projection

    3DMAX几何投影插件Geometry Projection是一款强大的工具,专为3D Max用户设计,用于增强其在3D建模过程中的工作效率和精确性。这款插件允许用户将一个或多个对象,甚至仅是对象的选定顶点,按照全球或局部坐标轴进行...

    GEE Projection The CRS of a map projection could not be parsed

    GEE错误:Error: Projection: The CRS of a map projection could not be parsed. (Error code: 3) 我正在尝试在 Albers 等积投影 ( https://code.earthengine.google.com/ccab6721def78c24dc2a0e079866a6fe ) 中...

    -3D-Projection_C#3D曲线绘制_

    3. **3D曲线表示**:3D曲线通常通过参数方程表示,其中每个维度(X, Y, Z)都是一个变量t的函数。例如,(x(t), y(t), z(t)),t在一定范围内变化。 4. **3D投影**:在2D屏幕上显示3D对象时,需要进行投影操作。常见...

    3D-LaneNet- End-to-End 3D Multiple Lane Detection.pdf

    We introduce a network that directly predicts the 3D layout of lanes in a road scene from a single image. This work marks a first attempt to address this task with onboard sensing without assuming a ...

    3D Graphics with Metal-May 28, 2019.z03--分卷3

    In this course you’ll get an introduction to computer graphics using Metal on the GPU. You’ll render 3D models and even write a simple game using your very own game engine. This course is for ...

    3D Cone beam CT (CBCT) projection backprojection FDK

    利用matlab进行FDK算法重建,最后得出结果,各个方向上的数据,FDK算法主要分为三步:第一步是对投影数据进行加权,第二步是对加权后的数据进行滤波,第三步是对滤波后的数据进行反投影,最后得到重建数据。

    3D Graphics with Metal-May 28, 2019.z04--分卷4

    In this course you’ll get an introduction to computer graphics using Metal on the GPU. You’ll render 3D models and even write a simple game using your very own game engine. This course is for ...

    3D Graphics with Metal-May 28, 2019.z01--分卷1

    In this course you’ll get an introduction to computer graphics using Metal on the GPU. You’ll render 3D models and even write a simple game using your very own game engine. This course is for ...

    3D Graphics with Metal-May 28, 2019.z06--分卷6

    In this course you’ll get an introduction to computer graphics using Metal on the GPU. You’ll render 3D models and even write a simple game using your very own game engine. This course is for ...

    High-Speed 3D Imaging with Digital Fringe Projection Techniques

    数字条纹投影技术(Digital Fringe Projection Techniques, DFPT)作为其中的一种重要方法,因其高精度、非接触测量等优点而备受关注。本文将详细介绍数字条纹投影技术的基本原理、关键技术及应用领域,并探讨其在...

    Fast and Accurate Calibration of a Kinect Sensor

    initializing the relative pose using a new minimal, optimal solution for registering 3D planes across different reference frames, (ii) including a metric constraint during the iterative refinement to ...

    Three-dimensional catadioptric vision sensor using omnidirectional dot matrix projection

    we develop a three-dimensional catadioptric vision sensor using 20 to 100 lasers arranged in a circular array called omnidirectional dot maxtric projection (ODMP). Based on the imaging characteristic...

    3D Graphics with Metal-May 28, 2019.zip--分卷0

    In this course you’ll get an introduction to computer graphics using Metal on the GPU. You’ll render 3D models and even write a simple game using your very own game engine. This course is for ...

    Lining Up Data in ArcGIS A Guide to Map Projections

    Lining Up Data in ArcGIS: A Guide to Map Projections is an easy-to-navigate troubleshooting reference for any GIS user with the common problem of data misalignment. Complete with full-color maps and ...

    3D Graphics with Metal-May 28, 2019.z05--分卷5

    In this course you’ll get an introduction to computer graphics using Metal on the GPU. You’ll render 3D models and even write a simple game using your very own game engine. This course is for ...

    3D Graphics with Metal-May 28, 2019.z02--分卷2

    In this course you’ll get an introduction to computer graphics using Metal on the GPU. You’ll render 3D models and even write a simple game using your very own game engine. This course is for ...

    Matlab code to reconstruct using simple back projection

    3. **MATLAB实现流程**: - **读取数据**:MATLAB程序首先读取CT扫描的投影数据,这通常是一个二维数组,代表不同角度下的投影值。 - **预处理**:对数据进行必要的归一化和校准,以确保其在合适的范围内。 - **...

Global site tag (gtag.js) - Google Analytics