Skip to content

Commit 36d861a

Browse files
authored
Merge pull request #10 from virtual-labs/dev
Fixed Simulation
2 parents 3babd60 + dac2b73 commit 36d861a

File tree

4 files changed

+70
-114
lines changed

4 files changed

+70
-114
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
node_modules
2+
build
3+
plugins

experiment/simulation/index.html

Lines changed: 1 addition & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
<strong style="font-size: 19px;">🔍 Transformation Matrix</strong>:
8989
<ul style="list-style-type: disc; padding-left: 20px;">
9090
<li>Monitor the values of the transformation matrix while adjusting the slider.</li>
91-
<li>The transformation matrix multiplies the points homogeneous coordinates, resulting in new
91+
<li>The transformation matrix multiplies the point's homogeneous coordinates, resulting in new
9292
coordinates for
9393
the translation effect.</li>
9494
<li>Note: This transformation matrix exclusively represents translation and does not include any
@@ -288,53 +288,6 @@
288288
<div id="observations" class="column has-text-centered is-2-desktop is-5-tablet is-5-mobile right">
289289
<div class="v-datalist-container" style="max-height: 100%; overflow-y: auto;">
290290

291-
<!-- Transformation Matrix -->
292-
<div class="v-datalist-title">Transformation Matrix</div>
293-
<div class="matrix-section">
294-
<div style="display: flex; flex-direction: column; gap: 5px;">
295-
<div style="display: flex; gap: 5px; justify-content: center;">
296-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-00"
297-
value="1" readonly>
298-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-01"
299-
value="0" readonly>
300-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-02"
301-
value="0" readonly>
302-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-03"
303-
value="0" readonly>
304-
</div>
305-
<div style="display: flex; gap: 5px; justify-content: center;">
306-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-10"
307-
value="0" readonly>
308-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-11"
309-
value="1" readonly>
310-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-12"
311-
value="0" readonly>
312-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-13"
313-
value="0" readonly>
314-
</div>
315-
<div style="display: flex; gap: 5px; justify-content: center;">
316-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-20"
317-
value="0" readonly>
318-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-21"
319-
value="0" readonly>
320-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-22"
321-
value="1" readonly>
322-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-23"
323-
value="0" readonly>
324-
</div>
325-
<div style="display: flex; gap: 5px; justify-content: center;">
326-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-30"
327-
value="0" readonly>
328-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-31"
329-
value="0" readonly>
330-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-32"
331-
value="0" readonly>
332-
<input class="input is-responsive is-small" style="width:20%" type="number" id="matrix-33"
333-
value="1" readonly>
334-
</div>
335-
</div>
336-
</div>
337-
338291
<div class="v-datalist-row is-responsive is-small" style="padding-top: 100px;">
339292
<div class="col-md-4"> <!-- Adjust the column size based on your layout needs -->
340293
Level 1 (Shoulder)
@@ -353,8 +306,6 @@
353306
</div>
354307
</div>
355308

356-
357-
358309
</div>
359310
</div>
360311

experiment/simulation/js/mech_arm.js

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@
22
import * as THREE from "https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js";
33

44
const origin = { x: 0, y: 0, z: 0 };
5+
6+
// Helper function to create materials with proper depth handling
7+
function createMaterial(color) {
8+
return new THREE.MeshPhongMaterial({
9+
color: color,
10+
shininess: 30,
11+
polygonOffset: true,
12+
polygonOffsetFactor: 1,
13+
polygonOffsetUnits: 1,
14+
side: THREE.DoubleSide
15+
});
16+
}
17+
518
export const createArm = function (
619
scene,
720
hand_comp,
@@ -22,13 +35,13 @@ export const createArm = function (
2235
arm_dim.z,
2336
32
2437
);
25-
const arm_cyl_mat = new THREE.MeshBasicMaterial({ color: 0x0000ff });
38+
const arm_cyl_mat = createMaterial(0x0000ff);
2639
const arm_cyl = new THREE.Mesh(arm_cyl_geo, arm_cyl_mat);
2740
arm_cyl.rotation.x = Math.PI / 2;
2841
arm_cyl.position.set(0, 0, 0);
2942

3043
const arm_box_geo = new THREE.BoxGeometry(arm_dim.x, arm_dim.y, arm_dim.z);
31-
const arm_box_mat = new THREE.MeshBasicMaterial({ color: 0xff7f50 });
44+
const arm_box_mat = createMaterial(0xff7f50);
3245
const arm_box = new THREE.Mesh(arm_box_geo, arm_box_mat);
3346
arm_box.position.set(arm_dim.x / 2, -arm_dim.y / 2, 0);
3447

@@ -42,39 +55,40 @@ export const createArm = function (
4255
arm_dim.z,
4356
32
4457
);
45-
const elbow_cyl_mat = new THREE.MeshBasicMaterial({ color: 0xff69b4 });
58+
const elbow_cyl_mat = createMaterial(0xff69b4);
4659
const elbow_cyl = new THREE.Mesh(elbow_cyl_geo, elbow_cyl_mat);
4760
elbow_cyl.rotation.x = Math.PI / 2;
4861
elbow_cyl.position.set(0, -fore_dim.y / 2, 0);
4962

5063
const f_geo = new THREE.BoxGeometry(fore_dim.x, fore_dim.y, fore_dim.z);
51-
const f_mat = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
64+
const f_mat = createMaterial(0x00ff00);
5265
const fore_arm = new THREE.Mesh(f_geo, f_mat);
5366
fore_arm.position.set(fore_dim.x / 2, fore_dim.y / 2, 0);
5467

5568
const elbow = new THREE.Group();
5669
elbow.add(elbow_cyl);
5770
elbow.add(fore_arm);
5871
elbow.position.set(arm_dim.x, -arm_dim.y, 0);
72+
5973
const wrist = new THREE.Group();
6074
wrist.position.set(fore_dim.x, 0, 0);
6175

62-
const wrist_cyl_geo = new THREE.CylinderGeometry(
63-
arm_dim.y / 4,
64-
arm_dim.y / 4,
65-
arm_dim.z,
66-
32
67-
);
68-
const wrist_cyl_mat = new THREE.MeshBasicMaterial({ color: 0xa52a2a });
69-
const wrist_cyl = new THREE.Mesh(wrist_cyl_geo, wrist_cyl_mat);
70-
wrist_cyl.rotation.x = Math.PI / 2;
71-
76+
const wrist_cyl_geo = new THREE.CylinderGeometry(
77+
arm_dim.y / 4,
78+
arm_dim.y / 4,
79+
arm_dim.z,
80+
32
81+
);
82+
const wrist_cyl_mat = createMaterial(0xa52a2a);
83+
const wrist_cyl = new THREE.Mesh(wrist_cyl_geo, wrist_cyl_mat);
84+
wrist_cyl.rotation.x = Math.PI / 2;
85+
7286
const p_geo = new THREE.BoxGeometry(palm_dim.x, palm_dim.y, palm_dim.z);
73-
const p_mat = new THREE.MeshBasicMaterial({ color: 0x00abcd });
87+
const p_mat = createMaterial(0x00abcd);
7488
const palm = new THREE.Mesh(p_geo, p_mat);
7589
palm.position.set(palm_dim.x / 2, 0, 0);
7690

77-
// adding objects in a hierarchical fashion
91+
// adding objects in a hierarchical fashion
7892
wrist.add(wrist_cyl);
7993
wrist.add(palm);
8094

@@ -93,12 +107,7 @@ const wrist_cyl_mat = new THREE.MeshBasicMaterial({ color: 0xa52a2a });
93107
};
94108

95109
export const moveArm = function (hand_comp, moveBy) {
96-
// hand_comp.forEach(Object => {
97-
// let curPos = new Vector3( Object.position.x, Object.position.y, Object.position.z );
98-
// let newPos = new THREE.Vector3( Object.position.x + moveBy.x, Object.position.y + moveBy.y, Object.position.z + moveBy.z);
99-
100110
hand_comp[0].translateOnAxis(new THREE.Vector3(1, 0, 0), moveBy.x);
101111
hand_comp[0].translateOnAxis(new THREE.Vector3(0, 1, 0), moveBy.y);
102112
hand_comp[0].translateOnAxis(new THREE.Vector3(0, 0, 1), moveBy.z);
103-
// });
104113
};

experiment/simulation/main.js

Lines changed: 37 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,6 @@ let ShldAngl = 180,
6565
ElbwAngl = 90,
6666
WrstAngl = 90;
6767

68-
let trans_matrix = new THREE.Matrix4();
69-
trans_matrix.set(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
70-
71-
let spanEditModal = document.getElementsByClassName("close")[0];
7268
let scene,
7369
PI = 3.141592653589793,
7470
camera,
@@ -441,7 +437,6 @@ let prev_y = 0;
441437
let prev_z = 0;
442438

443439
function movePoint(e) {
444-
// alert("hello");
445440
var target = e.target || e.srcElement;
446441

447442
// Get target values directly from input
@@ -455,46 +450,13 @@ function movePoint(e) {
455450
let curr_y = ty * translationScale - prev_y;
456451
let curr_z = tz * translationScale - prev_z;
457452

458-
// Create translation matrix
453+
// Update previous values
459454
prev_x += curr_x;
460455
prev_y += curr_y;
461456
prev_z += curr_z;
462-
let translate_M = new THREE.Matrix4().makeTranslation(curr_x, curr_y, curr_z);
463-
464-
// Update dot
465-
// dotList[0].geometry.applyMatrix4(translate_M);
466-
// if (dotList[0].geometry.isBufferGeometry) {
467-
// dotList[0].geometry.attributes.position.needsUpdate = true;
468-
// }
469-
470-
trans_matrix.multiply(translate_M);
471-
472-
// Reset transformation matrix if needed
473-
if (target.value <= 0) {
474-
trans_matrix.set(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
475-
}
476457

458+
// Move the arm
477459
moveArm(hand_comp, new THREE.Vector3(curr_x, curr_y, curr_z));
478-
479-
document.getElementById("matrix-00").value = trans_matrix.elements[0];
480-
document.getElementById("matrix-01").value = trans_matrix.elements[1];
481-
document.getElementById("matrix-02").value = trans_matrix.elements[2];
482-
document.getElementById("matrix-03").value = trans_matrix.elements[12];
483-
484-
document.getElementById("matrix-10").value = trans_matrix.elements[4];
485-
document.getElementById("matrix-11").value = trans_matrix.elements[5];
486-
document.getElementById("matrix-12").value = trans_matrix.elements[6];
487-
document.getElementById("matrix-13").value = trans_matrix.elements[13];
488-
489-
document.getElementById("matrix-20").value = trans_matrix.elements[8];
490-
document.getElementById("matrix-21").value = trans_matrix.elements[9];
491-
document.getElementById("matrix-22").value = trans_matrix.elements[10];
492-
document.getElementById("matrix-23").value = trans_matrix.elements[14];
493-
494-
document.getElementById("matrix-30").value = trans_matrix.elements[3];
495-
document.getElementById("matrix-31").value = trans_matrix.elements[7];
496-
document.getElementById("matrix-32").value = trans_matrix.elements[11];
497-
document.getElementById("matrix-33").value = trans_matrix.elements[15];
498460
}
499461

500462
function createLabel(text, direction, length) {
@@ -589,7 +551,6 @@ camera.updateProjectionMatrix();
589551
let init = function () {
590552
camera.position.set(5, 17, 20); // Set camera position behind and above the origin
591553

592-
// camera.lookAt(20, 10, 5);
593554
const light = new THREE.DirectionalLight(0xffffff, 3);
594555
light.position.set(1, 1, 1).normalize();
595556
scene.add(light);
@@ -624,12 +585,24 @@ let init = function () {
624585

625586
// Create the arrow helper for the current direction and color
626587
arrowHelper[i] = new THREE.ArrowHelper(dir[i], origin, length, color);
588+
// Add polygon offset to prevent z-fighting
589+
if (arrowHelper[i].material) {
590+
arrowHelper[i].material.polygonOffset = true;
591+
arrowHelper[i].material.polygonOffsetFactor = 1;
592+
arrowHelper[i].material.polygonOffsetUnits = 1;
593+
}
627594
scene.add(arrowHelper[i]);
628595

629596
// Create label for each axis and position it at the tip of the arrow
630597
const label = createLabel(labels[i], dir[i], length);
631-
scene.add(label);
598+
if (label && label.material) {
599+
label.material.polygonOffset = true;
600+
label.material.polygonOffsetFactor = 1;
601+
label.material.polygonOffsetUnits = 1;
602+
scene.add(label);
603+
}
632604
}
605+
633606
let PointGeometry = createArm(
634607
scene,
635608
hand_comp,
@@ -640,10 +613,31 @@ let init = function () {
640613
palm_dim,
641614
palm_pos
642615
);
643-
renderer = new THREE.WebGLRenderer();
616+
617+
// Add polygon offset to all arm components
618+
hand_comp.forEach(component => {
619+
if (component && component.material) {
620+
component.material.polygonOffset = true;
621+
component.material.polygonOffsetFactor = 1;
622+
component.material.polygonOffsetUnits = 1;
623+
}
624+
// Also check children for materials
625+
if (component && component.children) {
626+
component.children.forEach(child => {
627+
if (child && child.material) {
628+
child.material.polygonOffset = true;
629+
child.material.polygonOffsetFactor = 1;
630+
child.material.polygonOffsetUnits = 1;
631+
}
632+
});
633+
}
634+
});
635+
636+
renderer = new THREE.WebGLRenderer({ antialias: true });
644637
let w = container.offsetWidth;
645638
let h = container.offsetHeight;
646639
renderer.setSize(w, 0.83 * h);
640+
renderer.setPixelRatio(window.devicePixelRatio);
647641
container.appendChild(renderer.domElement);
648642
orbit = new OrbitControls(camera, renderer.domElement);
649643
orbit.mouseButtons = {

0 commit comments

Comments
 (0)