Expression Studio

Basic Silverlight 3D Element

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

Re: Basic Silverlight 3D Element

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

Re: Basic Silverlight 3D Element

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.

Re: Basic Silverlight 3D Element

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

Re: Basic Silverlight 3D Element

Thanks, this is more what I had in mind.

Robert

Re: Basic Silverlight 3D Element

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

Re: Basic Silverlight 3D Element

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

Re: Basic Silverlight 3D Element

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.

Re: Re: Basic Silverlight 3D Element

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

Re: Re: Basic Silverlight 3D Element

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/

Re: Basic Silverlight 3D Element

I did one sample silverlight 3D application by using Mesh.
I saw the Demos From http://sildev.net/3DDemo/ its very nice

I need one help click and drag the mouse to change the 3D shirt model position.
How can i achieve this give me a solution or any sample project or sample project link URL please

Re: Re: Basic Silverlight 3D Element

if you use the my library is very easy to do. Only add to the GeometryModel in the transform property a transform group with two Rotation3DTransform one over the X axis and other over the Y axis, and hook the mouseleftbuttondown, mousemove and mouseleftbuttonup to change the angle of the rotation. I go to add a sample of that on my sample project, only you need is download the last version of the sourcecode to get it. Also i actualize the running sample on axelerate website.

Re: Re: Re: Basic Silverlight 3D Element

HI Toducs

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

in that URL i saw the Rotation using mouse .. How can i get the source code .. please give the source link for that Horse Rotation using mouse

Re: Re: Re: Re: Basic Silverlight 3D Element

Hi I got the source code from Codeplex axeletarte

Re: Re: Re: Basic Silverlight 3D Element

Hi Toducs

i saw the applications form http://www.axelerate.com/SilverlightSamples/Silverlight3D/

when mouse drag on the horse it will be rotating its good one now my requirement is i want to add many more horse with the same function in to that single page when i am draaging over the horse at the time all the horse will be rotating how can i acheieve this ..

Re: Re: Re: Re: Basic Silverlight 3D Element

in that axelereate Horse doesnt work properly when the mouse over or mouse drag the horse its goes to opposite side .. i want to rotate the horse among with mouse position ..

that means

Mouse Position and angle == Horse

Re: Re: Re: Re: Basic Silverlight 3D Element

Hi,

The code to rotate the horse is maybe not the best, I am not sure of understant exactly wath you want to do, but another way to rotate the horse a little more precise is with the following code:

 private void viewport_MouseMove(object sender, MouseEventArgs e)
        {
            if (IsRotating)
            {
                Point newPosition = e.GetPosition(sender as UIElement);
                if ((newPosition.X - MousePosition.X) > 0)
                {
                	rotationY.Angle++;
                } 
                else if ((newPosition.X - MousePosition.X) < 0)
                {
                	rotationY.Angle--;
                }
                if ((newPosition.Y - MousePosition.Y) > 0)
                {
                	rotationX.Angle++;
                }
                else if ((newPosition.Y - MousePosition.Y) < 0)
                {
                	rotationX.Angle--;
                }
                MousePosition = newPosition;
            }
        }

Now, about the question of have multiple horses, you can do it, putting multiple viewports using maybe a grid to format the space. Yes, you can put all the horses that you want in one single viewport and have individual rotations or translations for each one, but on this moment i'm not added yet, the Hit test functionallity. That means, that you don't have a way to check if the mouse is clicking over one horse specifically, you only now that the mouse is clicking on the viewport inself.

Re: Re: Re: Re: Re: Basic Silverlight 3D Element

Dear Toducs

Thanks For your reply

Event of mouse drag is not properly in horse rotation. ( http://www.axelerate.com/SilverlightSamples/Silverlight3D/) When I am dragging the mouse in left Direction the horse is rotating in some other Direction.

Actually my requirement is when I click the horse part (Say for Example Leg), The Leg should rotate and come in front of user View (Leg should be in Visible position).

Re: Re: Re: Re: Re: Basic Silverlight 3D Element

Hi toducs

i am applying the image to horse from Xaml Page it will run susccessfully and image also applied

<axmedia3d:GeometryModel3D.Material>
                            <axmedia3d:DiffuseMaterial >
                                <axmedia3d:DiffuseMaterial.Brush>
                                    <ImageBrush>
                                        <ImageBrush.ImageSource>
                                            <BitmapImage UriSource="Simbu.jpg"></BitmapImage>
                                        </ImageBrush.ImageSource>
                                    </ImageBrush>
                                </axmedia3d:DiffuseMaterial.Brush>
                            </axmedia3d:DiffuseMaterial>

But i want to apply image to horse from code behind how can i achieve this

Re: Re: Re: Re: Re: Basic Silverlight 3D Element

Hi,

Easy, but a little tricky... you need know the structure of the logical tree; I mean, you have a viewport inside you have ModelView3D and a GeometryModel3D as content. you need do something like this:

 ImageSource myImageSource = new System.Windows.Media.Imaging.BitmapImage(new Uri("Simbu.jpg"));
ImageBrush myImageBrush = new ImageBrush();
myImageBrush.ImageSource = myImageSource;

((DiffuseMaterial)((GeometryModel3D)((ModelView3D)Viewport.Children[0]).Content).Material).Brush = myImageBrush

you need also remember set the x:Name of the Vieport3D on the xaml to Viewport for this example and the Children maybe is not the 0 in your case (if you use my sample code the frist ModelView3D is the directional light).