Solved

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

Posted on 2014-04-23
9
999 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
9 Comments
 
LVL 53

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
Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

 
LVL 53

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 53

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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

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. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

705 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