Create an Interactive 3d Model Viewer using 3ds Max and Wirefusion
Tutorial Details
- Program: 3ds Max, Wirefusion
- Difficulty: Advanced
- Completion Time: 26 minutes
Twice a month we revisit some of our reader’s favorite posts from throughout the history of Cgtuts+, and today we have an awesome Maya particles tutorial by Benoit Staumont. This tutorial was first published in December 2009 and proved incredibly popular! Let’s take a look…
In this two part tutorial, you will learn how to create an energy drink can in 3ds Max using poly modeling and splines, and then export your mesh to Wirefusion and add a user interface wich will allow you to move, zoom and rotate your can in real time, and finally create a feature that will allow anyone to change the texture of the can from their own computer.
If you are someone who makes corporate style videos frequently, this will provide you with a much quicker and more exciting way to visually represent data, instead of a plain Powerpoint-style slide. If you are not, then you will be able to learn some of the powerful things that you can do with animation using Xpresso and Mograph in conjunction with Cinema 4d.
Project Files
Download
Final Effect Preview
Video 1
Download
Note: click the ‘Monitor’ icon to view tutorial in full-screen HD.
Video 2
Download
Note: click the ‘Monitor’ icon to view tutorial in full-screen HD.
Don’t miss more CG tutorials and guides, published daily – subscribe to Cgtuts+ by RSS.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Benoit Staumont
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Cgtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
very niice, I ike it
cool tutorial! thank you very much!
are you from French? :P
greetz from Germany,
Max
he is from Belgium
thanks will come handy for sure
Does this also works with Cinema 4D?
Can I also export finish textured models ifI don’t want to change the textures?
I am pretty sure that you can export VRML files from C4D.
If you dont want to change the textures, you just have to stop the tutorial at part 2 – 20:30
Merci beaucoup, très tutoriel, mais le plus impressionnant reste ton accent anglais ;)
thank you very very much “Benoit Staumont”,this tut is very handy and usefull for me ,and i think the others have the same opinion……so,keep it up man ,we are waiting for your next amazing tuts…………………..;)
first questin: what verson of wirefusion are you using?
second questin: i can´t find the download for the “WireFusion Free Edition”, its taking me to the 30-days trial version.
Awesome tut
Btw, What’s the name of the Mozilla Firefox theme you are using?
Vraiment génial le tutorial, très très utile. Merci! Je vais de ce pas essayer tout ça avec Maya!
Hi, I was wondering what version of wirefusion you used in this tutorial? Was it the free version?
If not, would this all be possible in the free version?
Cheers
thnx man
Hi guys, thank you for the comments.
@ Erik : “NASA Night Launch”
@ AMc & volgar : The version I used for this tutorial is the 5.0.28.972 (Enterprise Edition). Unfortunately you will not be able to set a parameter name with the free edition.
But you can complete the tutorial until Part 2 – 20:30. Here is the link to download the free edition : http://www.demicron.com/download/free.html
Maybe you could try with the 30-days trial version but I am not sure that it will allows you to set a parameter name to an image object, you have to try by yourself. Sorry about that…
Thanks, great tutorial btw ill have a look into the trial version, im a student so just trying to learn new stuff all the time, thanks for the knowledge man, happy christmas
This guy’s English is really weird. Great tutorial though.
Dude, seriously you need to tell about the shortcuts used coz it just goes over the head without them.
Hi mate,
I apologize for my english. I hope you understood everything.
I can’t tell you which shortcuts I used.
First, I customized the shortcuts in 3D Studio Max.
Then, i even don’t remember them ’cause I use macro keys on my keyboard.
Anyways, thanks for the reply.
Plz tell ’bout the shortcuts used.
Great Tutorial
Nice one Benoit, good work
What is the latest version of Wirefusion ? Please give me details.
Wirefusion 5 – http://www.demicron.com/purchase/index.html
Very nice tutorials, but you need programming skills to change the texture of the model from you computer. Anyway, this is not a must. Personally I have no skills what so ever about php programming like you do. Very nice tutorials again:)
great
interesting
Superb, good techniques !
Très bien
hey men you’re my hero!! finally wirefusion tuts !! please do more WF tutorials with more complex projects , i’ve seen the demicron gallery but i dont know how to achieve that kind of results..(especially the washing machine example) . thks anyway!!
hi friend really your great i like it so much us well
thank you
Very nice tutorials. I have a question: how did you attached the upper part of the energy drink’s cap? (right there where you put your finger to open the drink)
Hello and thank you for your nice comments.
John.B : You’re right. Sometimes we have to learn new techniques if we want to make new things. In this tutorial, having some basic knowledge of programming can be useful.
cristhian : I’m glad you liked the tutorial. If some of you want more WF tutorials, tell me what you want to learn and maybe I’ll do more if I can.
Max : I hope I understand what part you mean. I did not weld this element to the rest of the object. In fact, none of the elements is welded with another. I’ve just attached them together with the attach tool. I hope I answered your question.
Yes, almoust, perhaps I didn’t make my self very clear, i’m very very sorry. I need to know how can I use the floating geometry, and when is recommended. Did you ussed that technique in this tutorial? I’m sorry if I ask to many questions, but there are so many thinks that I can learn from you, and I’m very impatient of learning new stuff in 3Ds Max:). From you I know about wirefusion for the first time, which is absolutely AMAIZING. If you can recommend me some video tuts of WF, or if you can make some…it will be heaven on earth for me. Feel free to mail me if you want. Again…great tutorials. God bless.
Hi, sorry for the delay.
Yes, I used this technique in the tutorial for the cap.
You can use the floating geometry when you want (to simulate a relief for exemple). But be carefull if you use GI or shadows : you will have to put the floating element very close to your object or you could see some unwanted shadows.
hey benoit!!! thanks for your answer!! i willl like to learn how to control animated models in WF, im doing some test with that right now but its difficult to learn how the timeline works , creating buttons like triggers or something, also i will like to learn how to bake textures to use in WF im a C4D and it will be interseting to se how to use Other 3dpackages rather tha 3dmax, i think that the perfect tutorial will be about product showcase , using animations an baked materials to comunicate how a product work, its just a suggestion, thank you so much again!!!
Hi !
Why not, I could make such a thing.
But first I have other projects I’m currently working on.
When I have a little more time, I’ll work on a more advanced project in WF.
Nice tutorial ^_^
Thanks a lot Benoit
I am fan of 3ds max i am dong scrch at him thank for u for this
hiiiiiiiiiiii
Thanks Laurens for this awesome tutorial and i have question
in part 1 every thing is okay till using IK when i am going to make last step linking IKHandle_Momentum & Dummy_Momentum_Taget with Body_Susp my car getting Scale and every thing getting crazy
* my car is seperated parts not one Object *
It dosen’t open in Firefox/IE after I publish the project. How does yours open?
I have read the trubleshooting, but I can’t figure it out :-?…
My file is just some text made in 3DMax..and the project has 800×650 pixels, with 4 commands (pan left/right, rotate and reset)…what sould I do? Can you help me?
Sorry, wright after….I updated my java plugin…and it works, keep up the good work by the way. :)
Could you please post the PHP code for the upload file like you had mentioned in the video. I can’ seem to find the tutorial you talked about on net.tutsplus.
Thanks
You can download the project files on this page.
Hi Benoit,
Really a great tutorial, thanks for your time to do this!
I did some interactive 3D models as a test for me using Cult3D in the past, now Cult3D looks like it hasn’t be updated to support the newest web browsers releases since a few years. But now with Wirefusion I have a great option to do interactive 3D models, really a good one.
Your did a great tutorial. Thanks!
Hello i wonder how to get that inviseble sight on the skeleton
thx// Lucas
I got this bugg. My X,Y,Z scaler/ set the posotion is gone i can’t choose where to put the things. Please help me someone
REALLY need some help here please reply!
Hi Lucas. If you lost your gizmo, just try to hit the “x” key on your keyboard.
oh shit sr for the spam…. didn’t notise i had comment Sry.
Hello, i just wonder how i make a scen/ picture off it when i’m done. what i men is like your Preview on this tut.
thanks for the tuto, i’am working on a projet with WireFusion and i realy have to make an interaction between the 3D scene and the user (like click on a door -> it open). If you know a tutorial explaning that please post it
Thanks ti all
Hi mate !
It’s easy as cake, you just have to play with the touchsensor and a progressor.
Don’t forget to animate your door in 3DSmax before the export.
The idea is :
Click on the door –> run the progressor
During the progress of the progressor –> run the animation
At the end of the progressor –> stop the animation
That’s it.
Here is a usefull link about the touchsensor : http://www.demicron.jp/wirefusion/support/learning/wf3/wf3d/lesson2/index.html
Hello ! Thanks for tuto.
I have Wirefusion 5.0.37 enterprise editions but i’ve not in-port > object > set diffuse color map.
Can you help me ? please
Mug
I can follow all the lesson in your tutorial and it’s very easy to understand even though your english is quite funny which is good.
but my question is. when is your next wirefusion tutorial coming out?
and also..
I have an animation from 3ds Max its a folding box animation actually. the thing is.. my animation play like its being fast foward. how to fix that?
and one more thing. when I pause my animation, I can’t zoom or move or rotate. .. but I want my box to be able to move rotate or zoom.. can you teach me how to fix all that.
and lastly I think I need to see more of your tutorial… please! if you have any other wirefusion tutorial other then these 2. I’d like to learn more from you.
Thanks
Hey guys sorry for the delay…
Mug : You got this problem one month ago so I guess it’s a little bit too late for you but maybe it will help some people : check if your object in 3DSmax has a map before the export. That’s very important.
Lawchin : I try to do my best to improve my english but I am glad to know that you understand everything in this tutorial. To be perfectly honest, I do not think I’ll make a new Wirefusion tutorial for the moment. I am too busy with my other projects.
To fix your animation in Wirefusion, try to change the “Time Interval”, it should work.
For your rotate/zoom/move problem : check if your camera doesn’t have any restriction in Wirefusion. If it doesn’t fix the problem then I’m afraid I can’t do anything for you as I can’t take a look on the file’s project.
Good luck
oh thanks very much. I’ll try and change the “time interval”. I’ll upload the file after I complete it.
hope you can help me check once I upload it. but it’s ok if you’re busy.. I understand. I can wait until you have time, doesn’t matter how long. lol
ok once again,
Thank you very much
No problem, I’m just waiting for your file.
great tutorials
thanks from china! I will follow your tutorials and try it myself
thanks again!
I have finished my first Project follow your tutorial
here is the test URL:
http://deutschlandv.kilu.de/can_test/can_test_changecolor.html
my User interface’s button function is a little different from your video function
thanks again!
I have finished my second Project follow your tutorial
here is the test URL:
http://deutschlandv.kilu.de/Plane_Project/plane.html
Hi !
I’m glad you’ve enjoyed the tutorial. Your projects are cool, I especially like the airplane! Good job.
Thank you for your reply~~~ I have rebuild my second Project to fix some error.
Here is the final sence: http://deutschlandv.kilu.de/Plane_Project2/plane_finish.html
My english is not very good but I still can understand every words in your english tutorial especially your:“extrude again、again the again the again the again” :-） very interesting teach style~~ I enjoy the proess of the tutrial ~
Hope you can bring us more interesting and good tutorials use the CG mix Java application~~
hola benoiitt !! muchas gracias por el tutorial,, aunque no hablo tu idioma dejame decirte que te entendi perfectamente,, de verdad muchas gracias por esa gran ayuda !!!.
Podrias hacer porfavor un tutorial de como hacer animaciones de los objetos en WF o es que esa animacion se hace en 3dstudio max y hay alguna forma de importarlo a WF.. de verdad te lo agradeceria muchoooo si lo tomas en cuentaa.
muchas gracias.
Hola! Viva Google Translator!
Me alegro de que hayas disfrutado el tutorial.
No eres el primero que me piden que haga otro tutorial sobre WireFusion.
Pero por ahora no tengo tiempo… Tomará un poco más.
Hi,
I followed your tutorial (great one, by the way) as closely as possible but can’t seem to get the diffuse map slot to be accessible in wirefusion, no matter what I tried. I went back and added the UVW again in 3ds max but still no joy. Is there any way you can help? Or is it because I’m using mental ray materials?
Thanks.
Hi noel,
If you are using MR for the lights and shadows, keep in mind that it is a 3D real time project. So you’ll have to bake the textures. Then apply the baked textures on the scene’s objects by using Standard Materials.
Remember that the “Render To Texture” in 3D Studio Max generates Shell Materials and Wirefusion doesn’t like it. So one more time, don’t forget to switch to Standard Materials.
Good luck.
Hello Benoit,
I strictly followed your tutorial but when I load the image in my 3D object that appears pixelize.
Maybe you know the answer?
Thank you.
Luca
This is a really nice tutorial
I have a few questions
1. Do you need to have the uv layout as I wanted to use Ambient Occlusion rather than a texture so how do I do this?
2.I wanted to add a shaded wireframe so that you can wireframe how do I do this?
3.How do I remove the upload boton as I do not wish to upload any texture as its going to be for my showreel with Ambient Occlusion so how can I do this?
I have not uv mapped any of my guns I like the interaction and I want to do this for my site but I need to now can this be done?
PS what version should I use will the free one do what I need to do?
Hi Umar. I’m glad you liked the tutorial.
Good new : Everything is doable
Bad new : To apply an A.O. effect, you’ll have to unwrap all your weapons
To apply an A.O. effect in Wirefusion, simply :
1. Unwrap your model
2. Apply an Arch & Design material (MR) with the special effect “Ambient Occlusion” activated
3. Bake your material with the Render To texture utility. Be sure to use Mental Ray and the existing channel 1
4. Apply your freshly backed texture on your object. To do this, use a Standard material
5. Export your scene
6. In Wirefusion, apply your texture(s) on your object(s)
For the wireframe rendering, Wirefusion allows you to choose the renderer type : phong, constant, reflection, wireframe, etc. Just be sure to check the “Filled faces” checkbox.
If you dont want to change the textures, just stop the tutorial at Part 2 – 20:30
And finally here is a link to a simple project I made to show you how A.O. effect can be simulated in Wirefusion http://www.overlutz.be/cgtuts/java_applets/TorusKnot.html
As you can see I made it with the trial version. So to answer to you question :
“What version should I use? Will the free one do what I need to do?”
The answer is yes.
Enjoy ;)
Hi I am unsure about this
Be sure to use Mental Ray and the existing channel 1?
Not sure what you mean by this.
Hey Benoit I love your
http://www.overlutz.be/cgtuts/java_applets/TorusKnot.html
Me be you can do a another video tutorial showing us how you did this but with the interface User Interface.jpg that had the “move rotate zoom reset” can you please do another video tutorial with this please
Maybe I’ll make a new Wirefusion tutorial but not immediately.
“Be sure to use Mental Ray and the existing channel 1″ : In the Render To Texture utility, you can choose a renderer. Just be sure to use MR for the Arch & Design material.
And under the Mapping Coordinates tab, you can use the existing channel (made with the Unwrap UVW modifier and using the channel 1 by default) or the Automatic Unwrap (which use the channel 3 by default).Keep in mind that Wirefusion doesn’t like the channel 3.