-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
148 lines (130 loc) · 7.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Swiry - Swiss jewelry</title>
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- <script src='./three.js/build/three.js'></script>-->
<script src='./js/three/three.min.js'></script>
<script src='./js/three/STLBinaryExporter.js'></script>
<script src='./js/FileSaver.js'></script>
<script src='./js/three/review.js' type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row" >
<h1>Design your own ring and export the resulting STL</h1>
<div class="col-sm-10">
Design your own ring - draw an image on the canvas below or upload your own picture.<br/>
Your changes on the ring will be updated in real time!<br/>
Once you are satisfied you may export and 3d print your own personal model.
3d print services such as <a href="https://www.materialise.com/">materialise</a> or <a href="https://www.shapeways.com/">Shapeways</a> will print metal versions for you.</br>
You can download a template <a href="layout_outside.jpg" download>for the outside</a> or <a href="layout.jpg" download>for the outside</a> of the ring.<br/>
<br/>
Not satisfied with your results? <a href="https://www.swiry.ch/#contact"> We can help you translate your visions</a><br/>
</div>
</div>
<div class="col-xs-12" style="height:20px;"></div>
<div class="row" >
<iframe id=viewer src="ring.html" frameBorder="0" scrolling="no" class="col-sm-12" height="500px">
Your browser does not support iframes
</iframe>
</div>
<!--<div id="canvas" name="drawCanvas" style="background: url('layout.jpg')"></div>-->
<div class="col-xs-12" style="height:20px;"></div>
<div class="row" >
<div class="col-sm-12">
<div id="canvas" style="margin-right:auto; margin-left: auto; width: 1024px;">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="drawWireframe" value="wireframe">
<label class="form-check-label" id="labelWireframe" for="drawWireframe">Draw wireframe</label>
</div>
</div>
<div class="col-sm-4">
<div class="form-group" style="width: 100%">
<div style="width: 100%">
<input class="form-check-input" type="checkbox" id="drawBothSides" value="bothsides" >
<label class="form-check-label" id="labelDrawBothSides" for="drawBothSides" >Draw on inside and outside</label>
</div>
<div style="width: 100%">
<input class="form-check-input" type="checkbox" id="mirrorInside" disabled>
<label class="form-check-label" id="labelMirrorInside" for="mirrorInside" >Mirror inside to align to outside</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group" style="width: 100%">
<input type="range" id="displacementRange" min="-0.1" value="-0.01" max="0.1" step="0.01" style="width: 100%">
<label id="labelDisplacementRange" for="displacementRange" >Displacement
</label>
<input type="range" id="displacementOffset" min="-0.1" value="-0.00" max="0.1" step="0.01" style="width: 100%">
<label id="labelDisplacementOffset" for="displacementOffset" >Displacement offset
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label class="btn btn-outline-primary" style="width: 100%">
Upload image<input type="file" id="imageLoader" name="imageLoader" hidden />
</label>
</div>
<div class="col-sm-4">
<input type="button" class="btn btn-outline-primary" id="resetCanvas" value="Reset Canvas" style="width: 100%">
</div>
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuMaterial" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 100%">
Choose material
</button>
<div class="dropdown-menu dropdownMenuItems" aria-labelledby="dropdownMenuButton" style="width: 100%">
<a class="dropdown-item" href="#" id="gold" style="width: 100%">Gold material</a>
<a class="dropdown-item" href="#" id="silver" style="width: 100%">Silver material</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-sm-4">
<input type="button" class="btn btn-outline-primary" id="exportSTL" value="exportSTL" style="width: 100%" >
</div>
</div>
<div class="col-xs-12" style="height:20px;"></div>
<div class="row">
<div class="col-sm-10">
We are jewelry designers. <a href="https://www.swiry.ch/#contact">Contact us</a> if you want to work together to create your own ring.<br/><br/>
</div>
<div class="col-sm-10">
<h3>Technical details</h3>
This is realized by live editing the vertexes of a Three.JS model via a bump map <br>
and then directly capturing the resulting modified graphic vertices from the graphic buffer.
Then the model is converted them to an STL object and exported.<br>
This is more a demo of what is possible with Three.JS - if you accidentally design a ring you like
it would be awesome.
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script async src='./js/canvas.js'></script>
</body>
</html>