Skip to content

Local coordinate system: x_e axis from JSON file for circular beams and legend #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RBergua merged 2 commits into from
Apr 16, 2026
+39 −30
Merged

Local coordinate system: x_e axis from JSON file for circular beams and legend #11

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aec9b6c
Local coordinate system using x_e and fallback
RBergua Apr 16, 2026
f3bf3de
Local coordinate system legend
RBergua Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 39 additions & 30 deletions ressources/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@ function createWorldFromJSONStream(Jstream) {

var origin = new THREE.Vector3().addVectors(P1, P2).multiplyScalar(0.5); // Arrows origin (center of element)

// Determine arrow characteristic length in the longitudinal and radial directions
// Determine arrow characteristic length in the longitudinal (arrowLen) and radial directions (arrowRad)
var L = P1.distanceTo(P2);
var arrowLen = L;
var arrowRad;
Expand All @@ -324,47 +324,43 @@ function createWorldFromJSONStream(Jstream) {

var xe, ye;

// Rectangular beams:
if (Props[iElem].shape === "rectangle" && Props[iElem].SideA_dir) {
// Unified local x-direction (from either format: rectangular o circular beams):
var x_e_dir = Props[iElem].SideA_dir || Props[iElem].x_e;

var SideA_dir = Props[iElem].SideA_dir;

// Convert OpenFAST → Three
if (x_e_dir) {
// Convert OpenFAST → Three.js: x=-yOF, y=zOF, z=-xOF
xe = new THREE.Vector3(
-SideA_dir[1],
SideA_dir[2],
-SideA_dir[0]
-x_e_dir[1],
x_e_dir[2],
-x_e_dir[0]
).normalize();

// enforce orthogonality
// Enforce orthogonality to ze
xe.sub(ze.clone().multiplyScalar(xe.dot(ze))).normalize();

ye = new THREE.Vector3().crossVectors(ze, xe).normalize();
}
// Cylinders
else {
} else {
// Fallback (no direction available, e.g., from older JSON files for circular beams)
// Reminder:
// Three.js (0,1,0) = OpenFAST Z
// Three.js (1,0,0) = −OpenFAST Y
// Three.js (0,0,1) = −OpenFAST X

var globalZ_three = new THREE.Vector3(0, 1, 0);

if (Math.abs(ze.dot(globalZ_three)) > 0.999) { // ze is almost or parallel to global vertical axis
// ze is vertical:
// xe = OpenFAST +X
// ye = OpenFAST +Y
xe = new THREE.Vector3(0, 0, -1);
ye = new THREE.Vector3(-1, 0, 0);
// Three.js (0,1,0) = OpenFAST Z (vertical upwards)
// Three.js (0,0,-1) = OpenFAST X
// Three.js (-1,0,0) = OpenFAST Y
const globalZ_three = new THREE.Vector3(0, 1, 0);

if (Math.abs(ze.dot(globalZ_three)) > 0.999) {
// ze vertical: singular case, cross product ze x globalZ degenerates to zero.
xe = new THREE.Vector3(0, 0, -1); // x_e is aligned with OpenFAST X global axis
} else {
// All other beaams that are not vertical
// xe must be parallel to the global XY plane (i.e., perpendicular to global vertical axis)
// and be perpendicular to ze.
// and perpendicular to ze. Cross product.
// Also, the rotation from ze toward global Z about xe is positive and <= than 180 degrees
xe = new THREE.Vector3().crossVectors(ze, globalZ_three).normalize();
// ye: right-hand rule
ye = new THREE.Vector3().crossVectors(ze, xe).normalize();
}
}

// ye: right-hand rule
ye = new THREE.Vector3().crossVectors(ze, xe).normalize();

// Build arrows
var group = new THREE.Group();
group.add(new THREE.ArrowHelper(xe, origin, arrowRad, 0xff0000, arrowRad*0.3, arrowRad*0.15)); // xe in red
Expand Down Expand Up @@ -785,7 +781,20 @@ function setupGUI(){
folder.add(params, 'showSeaBed' ).name('Sea bed ').onChange(function(v) {showHide(v,grd)} ).listen();
folder.add(params, 'showSeaLevel').name('Sea level').onChange(function(v) {showHide(v,swl)} ).listen();
folder.add(params, 'showEdges' ).name('Edges' ).onChange(function(v) {showHide(v, meshEdges)} ).listen();
localCSController = folder.add(params, 'showLocalCS').name('Local CS').onChange(function(v) { showHide(v && !params.animating && params.animID != 'Max', localCSAxes); }).listen(); // Local CS only visible when not animating
localCSController = folder.add(params, 'showLocalCS').name('Local CS')
.onChange(function(v) {
showHide(v && !params.animating && params.animID != 'Max', localCSAxes);
// Show/hide a small legend explaining the arrow colours
var leg = document.getElementById('localCS-legend');
if (!leg) {
leg = document.createElement('div');
leg.id = 'localCS-legend';
leg.style.cssText = 'position:fixed; bottom:8px; left:8px; background:rgba(0,0,0,0.8); color:#fff; padding:6px 12px; border-radius:4px; font-size:15px; pointer-events:none; line-height:2;';
leg.innerHTML = '<div style="margin-bottom:2px;">Local coordinate system:</div><span style="color:#ff4444; font-size:18px;">&#9679; x<sub>e</sub></span> &nbsp;&nbsp; <span style="color:#44ff44; font-size:18px;">&#9679; y<sub>e</sub></span> &nbsp;&nbsp; <span style="color:#4488ff; font-size:18px;">&#9679; z<sub>e</sub></span>';
document.body.appendChild(leg);
}
leg.style.display = v ? 'block' : 'none';
}).listen(); // Local CS only visible when not Displacement: None
folder.open();

var folder = gui.addFolder('View');
Expand Down
Loading