?
Solved

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

Posted on 2014-04-23
9
Medium Priority
?
1,125 Views
Last Modified: 2014-06-01
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
Comment
Question by:lucavilla
  • 3
  • 2
  • 2
7 Comments
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1000 total points
ID: 40018859
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
 

Author Comment

by:lucavilla
ID: 40018864
Interesting...  but what 3D program did they used to create the individual pieces?
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 40019020
Explore Three.js site (http://threejs.org/)
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40019037
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
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40019046
@pravinasar, how would you use three.js?
0
 
LVL 29

Assisted Solution

by:Pravin Asar
Pravin Asar earned 1000 total points
ID: 40019067
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
 

Author Comment

by:lucavilla
ID: 40019947
All very interesting. Thanks!!!
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question