Powered by MSDN

US - English
NEW! Silverlight 5 is available Learn More

Basic Silverlight 3D Element RSS

24 replies

Last post Jul 07, 2009 10:32 AM by einar@dolittle.com

(0)
  • rbunn83815

    rbunn83815

    Member

    156 Points

    73 Posts

    Basic Silverlight 3D Element

    Jun 07, 2007 12:01 PM | LINK

     Hello Everyone,

     I would like to make a basic 3D panel in Silverlight.  It should appear to be thin, but you should be able to see that it does have a little depth.  I would like to use basic animation to be able to rotate it180 degrees programmatically.  If a language is necessary I prefer C#, but I'll take any workable solution.  Also I would like to have the corners rounded.  I've seen a lot of samples containing this type of element but no tutorials on how to make one or make it animated.  Does anyone know how you make the colored mirror effect as well?  So basically the panel would look like it was made from some highly polished metal or something (maybe shiny plastic).  Thanks in advance.

     
                                                                                                                   Robert
     

    rounded corners animation 3d panel C#

    On the border of insanity and reason lies the realm of genius.
  • y_makram

    y_makram

    Contributor

    6952 Points

    1353 Posts

    Re: Basic Silverlight 3D Element

    Jun 09, 2007 06:06 PM | LINK

    Well, Microsft did drop the 3D features provided with WPF from SIlverlight. But you can still do 3D through polygon manipulation. This is a link to an interresting post about 3D in Silverlight

    http://www.dolittle.com/blogs/einar/archive/2007/05/19/3d-in-silverlight-1-1-alpha.aspx

    Telerik is also making a control suite that contains a 3D cube, I think the control they have is somewhat similar to what you need.

    http://www.telerik.com/products/silverlight/overview.aspx 

    Thanks
    Yasser Makram
    Independent Consultant
    http://www.silverlightrecipes.com
    _____
    Dont forget to click "Mark as Answer" on the post that helped you.
  • rbunn83815

    rbunn83815

    Member

    156 Points

    73 Posts

    Re: Basic Silverlight 3D Element

    Jun 10, 2007 03:36 AM | LINK

     I went to the site but I'm only seeing a demo and a toolkit.  Since I am still in basic learning mode on Silverlight technology I need some kind of description as to how to actually do this stuff.  Once I get to a higher skill level these sites will be more useful, but not at the moment.

                                                                                                                                              Robert

     

    P.S. Telerik appears to be making great stuff, but I want to learn how to build this stuff from scratch before I start integrating pre-built controls.
     

    On the border of insanity and reason lies the realm of genius.
  • y_makram

    y_makram

    Contributor

    6952 Points

    1353 Posts

    Re: Basic Silverlight 3D Element

    Jun 10, 2007 07:15 AM | LINK

    At this site you can find a #D demo with the source code http://bubblemark.com/3d/silverlight1.1.htm

    The source link is: http://bubblemark.com/3d/silverlight3d.zip

    The code is somehow complex, so if you are new to 3D stuff, go o http://www.gamedev.net where you can find tutorials, articles, and forums to help you learn about 3D basics like spaces, cameras, perspectives, viewports ... etc. For example this article shows the math for doing rotations in 3D

    http://www.gamedev.net/reference/articles/article790.asp 

    Thanks
    Yasser Makram
    Independent Consultant
    http://www.silverlightrecipes.com
    _____
    Dont forget to click "Mark as Answer" on the post that helped you.
  • rbunn83815

    rbunn83815

    Member

    156 Points

    73 Posts

    Re: Basic Silverlight 3D Element

    Jun 10, 2007 07:23 AM | LINK

    Thanks, this is more what I had in mind.

                                         Robert

    On the border of insanity and reason lies the realm of genius.
  • rbunn83815

    rbunn83815

    Member

    156 Points

    73 Posts

    Re: Basic Silverlight 3D Element

    Jun 11, 2007 08:58 AM | LINK

    Okay, after a little playing around in Blend I found a feature that might help me with what I want to do.  There is a menu item called "flip" which does return the mirror image of the object you are flipping over.  Although it seemed to only work instantaneously.  Is there any way to slow it down and show it as an animation?  I only want the object to appear to flip over in place it does not need to move at all.  I'm sure an animation this simple could be done by modifying the width of the panel to give it the appearance of "flipping over" without any 3D type of animation.  Does anyone know how to do this?  I have seen just about every demo on the internet so I doubt just giving me a link and saying "check out this demo" is going to help, unless the demo is pretty much doing exactly what I want to do.  Thanks in advance.

                                                                                                                          Robert

    On the border of insanity and reason lies the realm of genius.
  • y_makram

    y_makram

    Contributor

    6952 Points

    1353 Posts

    Re: Basic Silverlight 3D Element

    Jun 11, 2007 09:36 AM | LINK

    You can do this animation by foloowing these steps

    1- Select the object you need to rotate
    2- In objects and timelines window (by default on the left of blend screen), create a new Timeline (the + button)
    3- Drag the Timeline control to (yellow line) to the end of animation (One second for example)
    4- Make sure the Item you want to animate is selected
    5- In properties window Open the Transform Tab (at the bottom)
    6- Select rotate transform
    7- Enter the transform angle
    8- Click play to preview the animation

    Thanks
    Yasser Makram
    Independent Consultant
    http://www.silverlightrecipes.com
    _____
    Dont forget to click "Mark as Answer" on the post that helped you.
  • rbunn83815

    rbunn83815

    Member

    156 Points

    73 Posts

    Re: Basic Silverlight 3D Element

    Jun 12, 2007 02:08 AM | LINK

     Now we're talking!  Just following these 8 steps helped me figure out the basics of animation in less than a minute.  That was a subject that was throwing me off, but I get it now.  A million thanks on that!  However, I believe this transform function will only do animations in the x-y plane.  I think for my particular issue I will need to do some kind of trapezoid math along with the animation which is how you would fake this in 2D if I understand this kind of animation correctly.  This way the object appears to flip over in the z-plane as well, but really it's more of a 2D optical illusion.  Does anyone know what math you would use on this and how you would generate an animation with a mathematical function?  Thanks in advance.

    On the border of insanity and reason lies the realm of genius.
  • simbuaarumugam

    simbuaarumugam

    Participant

    1182 Points

    405 Posts

    Re: Re: Basic Silverlight 3D Element

    Oct 13, 2008 06:16 AM | LINK

     

    Hi

    I want to develop one silver light 3d Application I got a sample project by how to create sample application like 3D. It’s wonderful. Here I pasted the link for your reference http://www.markdawson.org/Kit3D/

    I download that project I verified it.

    Here we can see a image which is exactly like 3D but its not 3D.This is done by three main points,( http://www.markdawson.org/kit3d/demos/sl2/tiger/testpage.html)

    This can be done by the folowing points at code behind

    1.Position-To position the triangles

    2. TextureCoords-This is to apply texture for that image

    3.Triangle Indices-This contains the co-ordinates for “N” number of trianges to form a image like 3D.

    Sample Points for Triangle indices in kit3D

     

    string positions = "0,-0.061426,0.9388459 -0.049693,0.200773,0.692165 0,-0.031454,1.28361……………….”

     

    string textureCoords = "0.19086,-0.544059 0.272086,-0.355992 0.077337,-0.522561 0.187013,-0.516511 0.180133,-0.467245 0.17937,-0.4……………….”

     

     

    string triangleIndices = "300,301,302 299,300,302 298,300,299 295,296,297 294,295……………….”

     

    Here I mentioed some Links For your Reference

     

    http://www.markdawson.org/kit3d/demos/sl2/tiger/testpage.html
    http://www.markdawson.org/Kit3D/
    http://www.codeplex.com/Kit3D
    http://silverlight.net/forums/t/19853.aspx

    Now my requirement is I want to develop one sample shirt .how I can generate shirt like Tiger (http://www.markdawson.org/kit3d/demos/sl2/tiger/testpage.html) if you know how to generate it please tell .or otherwise if you know that three points(positions, textureCoords , triangleIndices )tell me .Any  queries welcome

    SimbuAarumugam India
    http://simbusoftwareengineer.blogspot.com
    (Mark As Answer If its Satisfy your needs)
  • Toducs

    Toducs

    Member

    20 Points

    10 Posts

    Re: Re: Basic Silverlight 3D Element

    Dec 04, 2008 09:45 PM | LINK

    Hello every one,

    I just release on codeplex too a 3D engine similar to Kit3D (Based on WPF 3D) totally c# and with support to xaml and flat lights (no textures).

    Here are the links to the project:

    code: http://www.codeplex.com/aXelerateSL3D

    running sample: http://www.axelerate.com/SilverlightSamples/Silverlight3D/

    3d silverlight chart silverlightlight 2.0 silverlight toolkit silveright 2 Silverlightht2 Silverlight Controls