Strut

index(babylonjs example).html

<canvas id="renderCanvas" touch-action="none"></canvas>

script.js

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);

var createScene = function () {
   var scene = new BABYLON.Scene(engine);

   var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
   light.intensity = 0.7;

   var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
   pl.intensity = 0.8;

   var mat = new BABYLON.StandardMaterial("mat1", scene);
   mat.alpha = 1.0;
   mat.diffuseColor = new BABYLON.Color3(1, 1, 1);

   const { add, subtract, multiply, divide, norm, cross, tan, sin } = math;
  
   //
   const [A, B, C] = [[-0.81,4.25,2.5],[0,5,0],[-2.63,4.25,0]];
  
  // Deg to rad
  const deg2rad = (deg) => deg * Math.PI / 180;


   // Extract the radial angles
   const [a, b] = [deg2rad(31.72), deg2rad(31.72)] //let angle 'a' be the angle on the left of the beam, and angle 'b' be the angle on the right
   const width = 0.030 //width of the strut
   const height = 0.04 //height of the strut
   const di = deg2rad(180 - 162); //dihedral angle


   // Define each of the subtractions
   const AB = subtract(A, B);
   const CB = subtract(C, B);
   const AC = subtract(A, C);
   const CA = subtract(C, A);
   const BA = subtract(B, A);

   const length_of_strut = norm(CA); // Length of the strut directly from the data
   const L = subtract(length_of_strut, divide(width, sin(a)));
   const L_inner = subtract(length_of_strut, add(multiply(width, add(tan(divide(a, 2)), tan(divide(b, 2)))), divide(width, sin(a))));
   const L_lowOuter = subtract(length_of_strut, subtract(multiply(height, tan(di), add(tan(divide(a, 2)), tan(divide(b, 2)))), divide(width, sin(a))));
   const d = subtract(width, multiply(height, tan(di)));
   const L_lowInner = subtract(L_lowOuter, multiply(d, subtract(tan(a), tan(b))));

   // Describe each of the vertices
   const P1 = B;
   const P2 = add(B, multiply(divide(AB, norm(AB)), divide(width, sin(b))));
   const P3 = add(P2, multiply(divide(CB, norm(CB)), L_inner));
   const P4 = add(B, multiply(divide(CB, norm(CB)), subtract(norm(CB), divide(width, sin(a)))));
   const P7 = subtract(P3, multiply(divide(cross(AB, CB), norm(cross(AB, CB))), height));
   const P8 = add(P7, multiply(divide(CA, norm(CA)), divide(subtract(width, multiply(height, tan(di))), sin(a))));
   const P6 = add(P7, multiply(divide(AC, norm(AC)), L_lowInner));
   const P5 = add(P6, multiply(divide(BA, norm(BA)), divide(subtract(width, multiply(height, tan(di))), sin(b))));

   const face = BABYLON.MeshBuilder.CreatePolyhedron('0', { 
     custom: {
       name: 'panel',
       category: ['panel'],
       vertex: [A, B, C],
       face: [[0, 1, 2]]
     }
   }, scene);
  
     var mat2 = new BABYLON.StandardMaterial("mat1", scene);
   mat2.alpha = 1.0;
   mat2.diffuseColor = new BABYLON.Color3(0, 1, 1);
  face.material = mat2;


   const polygon = BABYLON.MeshBuilder.CreatePolyhedron('0', { 
    custom: {  
     vertex: [
      P1,
      P2,
      P3,
      P4,
      P5,
      P6,
      P7,
      P8
     ],
     face: [
      // Inner edge of the strut
      [1, 2, 6, 5],

      // Top of the strut
      [0, 1, 2, 3],

      // Bottom of the strut
      [4, 5, 6, 7],

      // Dihedral edge of the strut
      [0, 3, 7, 4],

      // Flat end of the strut
      [2, 3, 7, 6],

      // Other end of the strut
      [0, 1, 5, 4]
     ]
     // "category":["Platonic Solid"],
    },
    sideOrientation: 2
   }, scene);
   // polygon.convertToFlatShadedMesh();
   polygon.material = mat;
   // polygon.position.y = -(0.5 * length_of_strut)
  
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);

// Positions the camera overwriting alpha, beta, radius
  camera.setPosition(new BABYLON.Vector3(B[0]-10, B[1]+5, B[2]));

// This attaches the camera to the canvas
  camera.attachControl(canvas, true);
  
  camera.wheelPrecision = 200;

// NOTE:: SET CAMERA TARGET AFTER THE TARGET'S CREATION AND NOTE CHANGE FROM BABYLONJS V 2.5
// targetMesh created here.
camera.target = polygon;

   return scene;
};

var scene = createScene(); //Call the createScene function

// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () { 
  scene.render();
});

// Watch for browser/canvas resize events
window.addEventListener("resize", function () { 
  engine.resize();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.9.0/math.min.js"></script>
<script src="https://cdn.babylonjs.com/babylon.js"></script>

strut.markdown

Strut

A Pen by rydealexander on CodePen.

License.

style.css

html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#renderCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}