Solved

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

Posted on 2014-04-23
9
970 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
9 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 250 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 52

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 52

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 250 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

679 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