jnnan commited on
Commit
10e383a
1 Parent(s): 5df56f8
Files changed (4) hide show
  1. .gitattributes +1 -0
  2. static/index.css +73 -0
  3. static/index.js +85 -22
  4. static/tutorial.gif +3 -0
.gitattributes CHANGED
@@ -36,3 +36,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
36
  objects_occ/background.blend filter=lfs diff=lfs merge=lfs -text
37
  objects_occ/background.obj filter=lfs diff=lfs merge=lfs -text
38
  static/room.glb filter=lfs diff=lfs merge=lfs -text
 
 
36
  objects_occ/background.blend filter=lfs diff=lfs merge=lfs -text
37
  objects_occ/background.obj filter=lfs diff=lfs merge=lfs -text
38
  static/room.glb filter=lfs diff=lfs merge=lfs -text
39
+ static/tutorial.gif filter=lfs diff=lfs merge=lfs -text
static/index.css ADDED
@@ -0,0 +1,73 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /*<!-- HTML !-->*/
2
+ /*<button class="button-73" role="button">Button 73</button>*/
3
+
4
+
5
+ .flex-container {
6
+ display: flex;
7
+ height: 100vh; /* Full viewport height */
8
+ }
9
+ .left-column {
10
+ flex: 0 0 200px; /* Fixed width */
11
+ background-color: #f2f2f2;
12
+ /* More styles for the left column content */
13
+ }
14
+ .right-column {
15
+ flex-grow: 1; /* Fill the remaining width */
16
+ background-color: #e8e8e8;
17
+ /* More styles for the right column content */
18
+ }
19
+ /* Style for the Three.js canvas container */
20
+ #canvas-container {
21
+ width: 100%;
22
+ height: 100%;
23
+ }
24
+
25
+
26
+
27
+ /* CSS */
28
+ .container {
29
+ position: absolute;
30
+ top: 3%;
31
+ left: 20%;
32
+ display: grid;
33
+ grid-template-columns: repeat(3, 1fr);
34
+ gap: 30px;
35
+ }
36
+
37
+
38
+
39
+ /* CSS */
40
+ .button-74 {
41
+ background-color: #fbeee0;
42
+ border: 2px solid #422800;
43
+ border-radius: 30px;
44
+ box-shadow: #422800 4px 4px 0 0;
45
+ color: #422800;
46
+ cursor: pointer;
47
+ display: inline-block;
48
+ font-weight: 600;
49
+ font-size: 18px;
50
+ padding: 0 18px;
51
+ line-height: 50px;
52
+ text-align: center;
53
+ text-decoration: none;
54
+ user-select: none;
55
+ -webkit-user-select: none;
56
+ touch-action: manipulation;
57
+ }
58
+
59
+ .button-74:hover {
60
+ background-color: #fff;
61
+ }
62
+
63
+ .button-74:active {
64
+ box-shadow: #422800 2px 2px 0 0;
65
+ transform: translate(2px, 2px);
66
+ }
67
+
68
+ @media (min-width: 768px) {
69
+ .button-74 {
70
+ min-width: 120px;
71
+ padding: 0 25px;
72
+ }
73
+ }
static/index.js CHANGED
@@ -3,27 +3,42 @@ import {OrbitControls} from 'https://unpkg.com/[email protected]/examples/jsm/contro
3
  import {GLTFLoader} from 'https://unpkg.com/[email protected]/examples/jsm/loaders/GLTFLoader.js';
4
  import {DragControls} from 'https://unpkg.com/[email protected]/examples/jsm/controls/DragControls.js'
5
 
6
- let scene, camera, renderer, cube, isDrawing, pointerDown;
 
7
  let frameIndex = 0;
8
  let pointCloudData;
9
- let showAnimation = false;
10
  let pointCloud
 
 
 
11
  const allModelsUrl = ['background.glb', 'basin.glb', 'bed.glb', 'flower.glb', 'kitchen_chair_1.glb', 'kitchen_chair_2.glb', 'office_chair.glb', 'sofa.glb', 'table.glb', 'wc.glb'];
12
  // const allModelsUrl = ['table.glb']
13
  const allModels_dict = {}
14
  const allModels_list = []
 
15
 
16
  function init() {
17
  scene = new THREE.Scene();
18
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
19
- camera.position.set(9, 6, -9);
 
 
 
 
 
 
 
20
  scene.add(camera)
21
 
22
  renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
23
  renderer.setSize(window.innerWidth, window.innerHeight);
24
  renderer.shadowMap.enabled = true;
25
  renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
26
- document.body.appendChild(renderer.domElement);
 
 
 
27
 
28
  const planeGeometry = new THREE.PlaneGeometry(1000, 1000);
29
  const plane = new THREE.Mesh(planeGeometry, new THREE.MeshBasicMaterial({ color: 0x000000, opacity: 0.25, transparent: true }));
@@ -33,13 +48,16 @@ function init() {
33
 
34
  let points = [];
35
  const line_geometry = new THREE.BufferGeometry().setFromPoints(points);
36
- const line_material = new THREE.LineBasicMaterial({ color: 0x0000ff });
37
  const line = new THREE.Line(line_geometry, line_material);
38
  scene.add(line);
39
 
40
 
41
- const controls = new OrbitControls(camera, renderer.domElement);
42
- controls.addEventListener('change', render);
 
 
 
43
 
44
  // const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
45
  // scene.add(light);
@@ -59,7 +77,7 @@ function init() {
59
  const geometry = new THREE.BufferGeometry();
60
  const points_frame = new Float32Array(1048 * 3);
61
  geometry.setAttribute('position', new THREE.BufferAttribute(points_frame, 3));
62
- const material = new THREE.PointsMaterial({ size: 0.04, color: 0x00ffff });
63
  pointCloud = new THREE.Points(geometry, material);
64
  scene.add(pointCloud);
65
 
@@ -69,15 +87,21 @@ function init() {
69
  assetLoader.load('/static/'.concat(allModelsUrl[i]), function (gltf) {
70
  const model = gltf.scene;
71
  if (i !== 0) {allModels_dict[allModelsUrl[i]] = model;
72
- allModels_list.push(model);}
 
 
73
 
74
  scene.add(model);
75
  }, undefined, function (error) {
76
  console.error(error);
77
  });
78
-
79
  }
80
 
 
 
 
 
 
81
  const dragControls = new DragControls(allModels_list, camera, renderer.domElement);
82
 
83
  dragControls.addEventListener('dragstart', function (event) {
@@ -115,10 +139,13 @@ function init() {
115
  const mouse = new THREE.Vector2();
116
  // Update the mouse vector with the current mouse position
117
  document.addEventListener('pointermove', function (event) {
118
- mouse.x = (event.x / renderer.domElement.clientWidth) * 2 - 1;
119
- mouse.y = -(event.y / renderer.domElement.clientHeight) * 2 + 1;
120
 
121
- if (isDrawing && pointerDown) {
 
 
 
 
 
122
  raycaster.setFromCamera(mouse, camera);
123
  const intersects = raycaster.intersectObject(plane);
124
  const point = intersects[0].point;
@@ -136,28 +163,53 @@ function init() {
136
  isDrawing = false;
137
  controls.enabled = true
138
  dragControls.enabled = true
 
139
 
140
  }, false);
141
 
142
- document.getElementById('buttonOverlaySecond').addEventListener('click', toggleDrawing);
143
  isDrawing = false;
144
 
145
 
146
  function toggleDrawing() {
 
 
 
147
  points = []
148
  isDrawing = true;
149
- controls.enabled = false
150
  dragControls.enabled = false
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
151
  }
152
 
153
- document.getElementById('buttonOverlay').addEventListener('click', runGeneration);
 
154
  function runGeneration() {
 
 
 
155
  const userData = {}
156
  for (let [key, value] of Object.entries(allModels_dict)) {
157
  userData[key] = value.children[0].position
158
  }
159
  userData['trajectory'] = points
160
- console.log(userData)
161
 
162
  fetch('/move_cube', {
163
  method: 'POST',
@@ -169,6 +221,8 @@ function init() {
169
  .then(response => response.json())
170
  .then(data => {
171
  pointCloudData = data
 
 
172
  })
173
  .catch((error) => {
174
  console.error('Error:', error);
@@ -190,13 +244,12 @@ function init() {
190
  animate();
191
  }
192
 
 
193
  function updatePointCloud() {
194
- if (!pointCloudData) {return}
195
 
196
- // const geometry = new THREE.BufferGeometry();
197
- // const material = new THREE.PointsMaterial({ size: 0.1, color: 0x00ff00 });
198
- // const pointsCloud = new THREE.Points(geometry, material);
199
- // scene.add(pointsCloud);
200
  const positions = pointCloud.geometry.attributes.position.array;
201
  const frameData = pointCloudData[frameIndex];
202
 
@@ -212,8 +265,18 @@ function updatePointCloud() {
212
  }
213
 
214
  function animate() {
 
 
215
  requestAnimationFrame(animate);
 
216
  updatePointCloud()
 
 
 
 
 
 
 
217
  renderer.render(scene, camera);
218
  }
219
 
 
3
  import {GLTFLoader} from 'https://unpkg.com/[email protected]/examples/jsm/loaders/GLTFLoader.js';
4
  import {DragControls} from 'https://unpkg.com/[email protected]/examples/jsm/controls/DragControls.js'
5
 
6
+
7
+ let scene, camera, renderer, cube, isDrawing, pointerDown, controls;
8
  let frameIndex = 0;
9
  let pointCloudData;
10
+ const now = Date.now();
11
  let pointCloud
12
+ let quaternionStart, positionStart;
13
+ let isGenerating = false;
14
+
15
  const allModelsUrl = ['background.glb', 'basin.glb', 'bed.glb', 'flower.glb', 'kitchen_chair_1.glb', 'kitchen_chair_2.glb', 'office_chair.glb', 'sofa.glb', 'table.glb', 'wc.glb'];
16
  // const allModelsUrl = ['table.glb']
17
  const allModels_dict = {}
18
  const allModels_list = []
19
+ let initLoc = {}
20
 
21
  function init() {
22
  scene = new THREE.Scene();
23
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
24
+ // camera.position.set(9, 6, -9);
25
+ camera.position.set(3, 13, 0);
26
+
27
+
28
+ // var qm = new THREE.Quaternion(0.1, 0.2, 0.3, 0.4);
29
+ // camera.quaternion.copy(qm)
30
+ // camera.updateMatrixWorld();
31
+
32
  scene.add(camera)
33
 
34
  renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
35
  renderer.setSize(window.innerWidth, window.innerHeight);
36
  renderer.shadowMap.enabled = true;
37
  renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
38
+ // document.body.appendChild(renderer.domElement);
39
+
40
+ const canvasContainer = document.getElementById('canvas-container');
41
+ canvasContainer.appendChild(renderer.domElement);
42
 
43
  const planeGeometry = new THREE.PlaneGeometry(1000, 1000);
44
  const plane = new THREE.Mesh(planeGeometry, new THREE.MeshBasicMaterial({ color: 0x000000, opacity: 0.25, transparent: true }));
 
48
 
49
  let points = [];
50
  const line_geometry = new THREE.BufferGeometry().setFromPoints(points);
51
+ const line_material = new THREE.LineBasicMaterial({ color: 0x0000ff, linewidth: 3 });
52
  const line = new THREE.Line(line_geometry, line_material);
53
  scene.add(line);
54
 
55
 
56
+ controls = new OrbitControls(camera, renderer.domElement);
57
+ // controls.addEventListener('change', render);
58
+
59
+ // const quaternion = new THREE.Quaternion(-0.707, 0, 0, 0.707)
60
+ // camera.quaternion.copy(quaternion)
61
 
62
  // const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
63
  // scene.add(light);
 
77
  const geometry = new THREE.BufferGeometry();
78
  const points_frame = new Float32Array(1048 * 3);
79
  geometry.setAttribute('position', new THREE.BufferAttribute(points_frame, 3));
80
+ const material = new THREE.PointsMaterial({ size: 0.04, color: 0x2020e0 });
81
  pointCloud = new THREE.Points(geometry, material);
82
  scene.add(pointCloud);
83
 
 
87
  assetLoader.load('/static/'.concat(allModelsUrl[i]), function (gltf) {
88
  const model = gltf.scene;
89
  if (i !== 0) {allModels_dict[allModelsUrl[i]] = model;
90
+ allModels_list.push(model);
91
+ initLoc[allModelsUrl[i]] = model.children[0].position.clone()
92
+ }
93
 
94
  scene.add(model);
95
  }, undefined, function (error) {
96
  console.error(error);
97
  });
 
98
  }
99
 
100
+ // for (let [key, value] of Object.entries(allModels_dict)) {
101
+ // initLoc[key] = value.children[0].position
102
+ // }
103
+
104
+
105
  const dragControls = new DragControls(allModels_list, camera, renderer.domElement);
106
 
107
  dragControls.addEventListener('dragstart', function (event) {
 
139
  const mouse = new THREE.Vector2();
140
  // Update the mouse vector with the current mouse position
141
  document.addEventListener('pointermove', function (event) {
 
 
142
 
143
+ const rect = renderer.domElement.getBoundingClientRect();
144
+
145
+ mouse.x = ((event.x - rect.left) / rect.width) * 2 - 1;
146
+ mouse.y = -((event.y - rect.top) / rect.height) * 2 + 1;
147
+
148
+ if (isDrawing && pointerDown && points.length < 500) {
149
  raycaster.setFromCamera(mouse, camera);
150
  const intersects = raycaster.intersectObject(plane);
151
  const point = intersects[0].point;
 
163
  isDrawing = false;
164
  controls.enabled = true
165
  dragControls.enabled = true
166
+ document.getElementById('toggleDraw').innerHTML = "Draw Trajectory";
167
 
168
  }, false);
169
 
170
+ document.getElementById('toggleDraw').addEventListener('click', toggleDrawing);
171
  isDrawing = false;
172
 
173
 
174
  function toggleDrawing() {
175
+ controls.enabled = false
176
+ quaternionStart = camera.quaternion.clone();
177
+ positionStart = camera.position.clone();
178
  points = []
179
  isDrawing = true;
180
+
181
  dragControls.enabled = false
182
+
183
+ document.getElementById('toggleDraw').innerHTML = "Drawing";
184
+ }
185
+
186
+ document.getElementById('reset').addEventListener('click', reset);
187
+
188
+ function reset() {
189
+ points = [];
190
+ line_geometry.setFromPoints(points);
191
+
192
+ for (let [key, value] of Object.entries(allModels_dict)) {
193
+ value.children[0].position.set(initLoc[key].x, initLoc[key].y, initLoc[key].z);
194
+ }
195
+ document.getElementById('toggleDraw').innerHTML = "Draw Trajectory";
196
+ pointCloudData = null;
197
+ pointCloud.geometry.attributes.position.array = new Float32Array(1048 * 3);
198
+ pointCloud.geometry.attributes.position.needsUpdate = true;
199
+ render()
200
  }
201
 
202
+ document.getElementById('generateMotion').addEventListener('click', runGeneration);
203
+
204
  function runGeneration() {
205
+ if (!points.length || isGenerating) {return}
206
+ isGenerating = true;
207
+
208
  const userData = {}
209
  for (let [key, value] of Object.entries(allModels_dict)) {
210
  userData[key] = value.children[0].position
211
  }
212
  userData['trajectory'] = points
 
213
 
214
  fetch('/move_cube', {
215
  method: 'POST',
 
221
  .then(response => response.json())
222
  .then(data => {
223
  pointCloudData = data
224
+ document.getElementById("generateMotion").innerHTML = "Generate Motion";
225
+ isGenerating = false;
226
  })
227
  .catch((error) => {
228
  console.error('Error:', error);
 
244
  animate();
245
  }
246
 
247
+
248
  function updatePointCloud() {
249
+ if (!pointCloudData) {
250
 
251
+ return;
252
+ }
 
 
253
  const positions = pointCloud.geometry.attributes.position.array;
254
  const frameData = pointCloudData[frameIndex];
255
 
 
265
  }
266
 
267
  function animate() {
268
+ // requestAnimationFrame(animate);
269
+ setTimeout(() => {
270
  requestAnimationFrame(animate);
271
+ }, 1000 / 25);
272
  updatePointCloud()
273
+
274
+ if (isGenerating) {
275
+ let dotNum = parseInt((Date.now() - now) / 500) % 8
276
+ const dot = Array(dotNum * 2).join('.')
277
+ document.getElementById("generateMotion").innerHTML = "Loading" + dot;
278
+ }
279
+
280
  renderer.render(scene, camera);
281
  }
282
 
static/tutorial.gif ADDED

Git LFS Details

  • SHA256: 7efdbcd11ed78f42ff0030167be0bfff43c3b5ec8aa0c13d420f973a75dd43e9
  • Pointer size: 133 Bytes
  • Size of remote file: 54.7 MB