• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1219
  • Last Modified:

I need to build a 3D shirt designer in HTML5. What SW technology?

I'd like to help a friend developing an HTML5 3D custom dress shirt designer like these:
http://www.blanklabel.com/Products/Shirt
http://www.joebutton.com/custume-310p
http://www.shirtsmyway.com/design_myshirt.php

What software technologies are best suitable for this task?
0
lucavilla
Asked:
lucavilla
  • 3
  • 2
  • 2
2 Solutions
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
html, css and js.  Probably a database to store info.  From the first link, you can see they just have a jigsaw puzzle and put the pieces together.

<div id="shirt">
                        <div id="sba5" style="position: absolute; top: 0px; left: 0px;">
                            <img alt="" id="sba5img" src="http://c4233705.r5.cf2.rackcdn.com/StandardSleeve_WhiteLineIssueSolver.png">
                        </div>
                        <div id="sba" style="position: absolute; top: 0px; left: 0px;">
                            <img id="sbaimg" src="http://c4233705.r5.cf2.rackcdn.com/883_main_set2_0003.png" alt="">
                        </div>
                        <div id="ssl" style="position: absolute; top: 0px; left: 0px;">
                            <img id="sslimg" src="http://c4233705.r5.cf2.rackcdn.com/883_main_set2_0000.png" alt="">
                        </div>
                        <div id="scu" style="position: absolute; top: 0px; left: 0px;">
                            <img id="scuimg" src="http://c4233705.r5.cf2.rackcdn.com/883_main_set1_0006.png" alt="">
                        </div>
                        <div id="sba1" style="position: absolute; top: 0px; left: 0px;">
                            <img id="sba1img" src="http://c12743256.r56.cf2.rackcdn.com/Images/blank.png" alt="">
                        </div>
                        <div id="spl" style="position: absolute; top: 0px; left: 0px;">
                            <img id="splimg" src="http://c4233705.r5.cf2.rackcdn.com/883_main_set3_0012.png" alt="">
                        </div>
                        <div id="sco_neru" style="position: absolute; top: 0px; left: 0px;">
                            <img id="scoimg_neru" src="http://c12743256.r56.cf2.rackcdn.com/Images/blank.png" alt="">
                        </div>
                        <div id="sco" style="position: absolute; top: 0px; left: 0px;">
                            <img id="scoimg" src="http://c4233705.r5.cf2.rackcdn.com/883_main_set3_0002.png" alt="">
                        </div>
                        <div id="scob" style="position: absolute; top: 0px; left: 0px;">
                            <img id="scobimg" src="http://c4233705.r5.cf2.rackcdn.com/1_main_button_0002.png" alt="">
                        </div>
                        <div id="scobd" style="position: absolute; top: 0px; left: 0px;">
                            <img id="scobdimg" src="http://c12743256.r56.cf2.rackcdn.com/Images/blank.png" alt="">
                        </div>
                        <div id="spo" style="position: absolute; top: 0px; left: 0px;">
                            <img id="spoimg" src="http://c12743256.r56.cf2.rackcdn.com/Images/blank.png" alt="">
                        </div>
                        <div id="ssh" style="position: absolute; top: 0px; left: 0px;">
                            <img id="sshimg" src="http://c12743256.r56.cf2.rackcdn.com/Images/blank.png" alt="">
                        </div>
                        <div id="sshb" style="position: absolute; top: 0px; left: 0px;">
                            <img id="sshbimg" src="http://c12743256.r56.cf2.rackcdn.com/Images/blank.png" alt="">
                        </div>
                        <div id="scol" style="position: absolute; top: 0px; left: 0px;">
                            <img id="scolimg" src="http://c4233705.r5.cf2.rackcdn.com/883_main_set3_0004.png" alt="">
                        </div>
                        <div id="scsic" style="position: absolute; top: 0px; left: 0px;">
                            <img id="scsicimg" src="http://c12743256.r56.cf2.rackcdn.com/Images/blank.png" alt="">
                        </div>
                        <div id="scui" style="position: absolute; top: 0px; left: 0px;">
                            <img id="scuiimg" src="http://c12743256.r56.cf2.rackcdn.com/Images/blank.png" alt="">
                        </div>
                        <div id="sba3" style="position: absolute; top: 0px; left: 0px;">
                            <img id="sba3img" src="http://c4233705.r5.cf2.rackcdn.com/1_main_button_0004.png" alt="">
                        </div>
                        <div id="sba4" style="position: absolute; top: 0px; left: 0px;">
                            <img id="sba4img" src="http://c12743256.r56.cf2.rackcdn.com/Images/blank.png" alt="">
                        </div>
                        <div id="zoomcuff" onmouseover="zoomShow(2)" onmouseout="zoomHide()">
                            <img alt="" id="zoomcuffimg" width="32" height="32" src="//c12743256.r56.cf2.rackcdn.com/Images/zoom_in.png">
                        </div>
                        <div id="zoomcollar" onmouseover="zoomShow(1)" onmouseout="zoomHide()">
                            <img alt="" id="zoomcollarimg" width="32" height="32" src="//c12743256.r56.cf2.rackcdn.com/Images/zoom_in.png">
                        </div>
                        <div id="zoomshoulder" onmouseover="zoomShow(3)" onmouseout="zoomHide()">
                            <img alt="" id="zoomshoulderimg" width="32" height="32" src="//c12743256.r56.cf2.rackcdn.com/Images/zoom_in.png">
                        </div>
                        <div id="zoompocket" onmouseover="zoomShow(4)" onmouseout="zoomHide()">
                            <img alt="" id="zoompocketimg" width="32" height="32" src="//c12743256.r56.cf2.rackcdn.com/Images/zoom_in.png">
                        </div>
                        <div id="zoomcuffinner" onmouseover="zoomShow(5)" onmouseout="zoomHide()">
                            <img alt="" id="zoomcuffinnerimg" width="32" height="32" src="//c12743256.r56.cf2.rackcdn.com/Images/zoom_in.png">
                        </div>
                    </div>

Open in new window

0
 
lucavillaAuthor Commented:
Interesting...  but what 3D program did they used to create the individual pieces?
0
 
Pravin AsarPrincipal Systems EngineerCommented:
Explore Three.js site (http://threejs.org/)
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
They look like images.  You can use any photo and slice it up or make yourself a drawing.

This is a one of the actual images
collarThis image I found from googeling collars.
collars
To do this project, you need to be part front end developer, part graphic designer and part backend developer.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
@pravinasar, how would you use three.js?
0
 
Pravin AsarPrincipal Systems EngineerCommented:
The site has plenty of examples.

Once a 3d scene and shape is drawn, you can apply texture map.
(see simple example of cube

http://threejs.org/examples/#webgl_geometry_cube

You can draw the shape (in your case shirt) with  API

Even you can find a tutorial on how to model shirt
(http://grabcad.com/questions/tutorial-how-to-model-t-shirt-in-sw)
0
 
lucavillaAuthor Commented:
All very interesting. Thanks!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now