Skip to main content
Home Forums Silverlight Design Expression Studio Basic Silverlight 3D Element
24 replies. Latest Post by einar@dolittle.com on July 7, 2009.
(0)
rbunn83815
Member
156 points
73 Posts
06-07-2007 8:01 AM |
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
y_makram
Contributor
6172 points
1,233 Posts
06-09-2007 2:06 PM |
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
06-09-2007 11:36 PM |
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.
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.
06-10-2007 3:15 AM |
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
06-10-2007 3:23 AM |
Thanks, this is more what I had in mind.
06-11-2007 4:58 AM |
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.
06-11-2007 5:36 AM |
You can do this animation by foloowing these steps
1- Select the object you need to rotate2- 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 selected5- In properties window Open the Transform Tab (at the bottom)6- Select rotate transform7- Enter the transform angle8- Click play to preview the animation
06-11-2007 10:08 PM |
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.
simbuaar...
Participant
1172 points
405 Posts
10-13-2008 2:16 AM |
Normal 0 false false false EN-US X-NONE X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;}
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
Toducs
20 points
10 Posts
12-04-2008 5:45 PM |
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/
12-05-2008 3:37 AM |
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
12-05-2008 11:37 AM |
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.
12-06-2008 4:28 AM |
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
12-06-2008 7:45 AM |
Hi I got the source code from Codeplex axeletarte
12-07-2008 11:28 PM |
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 ..
12-08-2008 6:51 AM |
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
12-08-2008 12:13 PM |
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; } }
12-09-2008 1:33 AM |
Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4 /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;}
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).
12-09-2008 6:19 AM |
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
12-09-2008 10:04 AM |
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
12-10-2008 1:53 AM |
I was checking your code . it through some error
Unable to cast object of type 'Axelerate.Silverlight3D.Media.Media3D.DirectionalLight' to type 'Axelerate.Silverlight3D.Media.Media3D.GeometryModel3D'.
How can apply image through code behind can u send the sample to me …
12-22-2008 3:28 AM |
How do we create AmbientLight and DirectionalLight in silverlight by using Kit3D .. i am creating one 3D application by using Kit3D . now i want to give AmbientLight and DirectionalLight on that 3D Object from code behind .In that Kit3D dont have the facility for creating AmbientLight and DirectionalLight .How can we achieve this any solution
balukr54
124 points
143 Posts
01-19-2009 1:13 AM |
hi all
how can i create 3d models in silverlight.Is there any tools for it.
Thanks and regards
balu
01-19-2009 11:45 AM |
You can try to use a pluggin from Maya to export to xaml and the Axelerate Silverlight 3D to display it. But remember remove from the exported model the unsoported elements like SepecularMaterials, MaterialGroups, etc..., Also the exported xaml don't have the namespaces required. If you download the source code of the Axelerate Silverlight 3D from codeplex on the demo where is the horse i put there (on the xaml) the urls to the page that i use to convert the horse from 3DS to xaml.
einar@do...
27 points
20 Posts
07-07-2009 6:32 AM |
Balder has reached Alpha stage and we're getting quite good framerates on Silverlight 3 with complex models.
You can read more about it here and here.
The official site now has tutorials and a release to start working with it. The current 0.8 release supports both SL2 and SL3. You'll find the official site here.
Basic Silverlight 3D Element