React Three Fiber , Geometry Rotation

Questions
1

Hello,

I am working on geometry creation using React Three Fiber and need help rotating the geometry at a certain angle from a specific point and direction. I am providing the code below.

import React from ‘react’;
import * as THREE from ‘three’;
import Creatmainrafter from ‘…/function_js/CreatRafter’;

const RightRafter = () => {

function getHeightAtDistance(slope, maxHeight, objectDistance, targetDistance) {
    // Calculate the height at the specified distance from the origin
    if (targetDistance === objectDistance) {
        // If the target distance is equal to the object's distance, return the maximum height
        return maxHeight;
    } else {
        // Calculate the height using the equation of the lines
        var distanceDifference = Math.abs(targetDistance - objectDistance);
        var heightDifference = slope * distanceDifference;
        var heightAtTarget = maxHeight - heightDifference;
        return heightAtTarget;
    }
}

let colArray = [3, 1.8, 4.8];
let maniarry = [6.7, 6.7, 6.7, 6.7, 6.7, 6.7, 6.7, 6.7, 6.7, 6.7, 6.7, 6.7]; // Array of positions
let windarry = [7, 7, 7, 7, 14, 7, 7, 7, 7];

const columnProps = [];

let RHeight = 13.6;
let RDistance = 35;
let Slope = 0.11;
let WallThickness = 0.23;
let WallHeight = 3500;
let BPLength = 400;
let BPWidth = 400;
let BPType = "Fixed";
let POffsetLength = 50;
let POffsetWind = 50;
let FrontWall = false;
let BackWall = true;
let LeftWall = false;
let RightWall = false;

// Basic Calculation
let mainlength = 0;
let mainwidth = 0;

// Calculate sum of main lengths
for (let i = 0; i < maniarry.length; i++) {
    mainlength += maniarry[i];
}

// Calculate sum of main widths
for (let i = 0; i < windarry.length; i++) {
    mainwidth += windarry[i];
}

let extralength = mainwidth / 4;
let mainfrontgrid = maniarry.length + 1;
let mainsidegrid = windarry.length + 1;
let loffset = ((BPWidth / 2) + POffsetWind) / 1000;
let woffset = ((BPLength / 2) + POffsetLength) / 1000;

let startDepthMeters;
let endDepthMeters;
let topFlangeMeters;
let bottomFlangeMeters;
let webThicknessMeters;
let topFlangeThicknessMeters;
let bottomFlangeThicknessMeters;
let beamstartDepthMeters = 300 / 1000;

let sumvalue = colArray.reduce((acc, val) => acc + val, 0);

let specificDistance = mainwidth;
let zeroheight = getHeightAtDistance(Slope, RHeight, RDistance, specificDistance);

specificDistance = mainwidth + windarry[windarry.length-1];
let firstheight = getHeightAtDistance(Slope, RHeight, mainwidth + RDistance, specificDistance);

// for all other rafter 

let rafter;
let maingridcrement = 0;

for (let i = 0 ; i<maniarry.length - 1 ; i++)

    {

        let rafter = {
            startDepthMeters: 1200,
            endDepthMeters: 800,
            topFlangeMeters: 250,
            bottomFlangeMeters: 250,
            webThicknessMeters: 6,
            topFlangeThicknessMeters: 12,
            bottomFlangeThicknessMeters: 12,
            origin: new THREE.Vector3(maingridcrement , sumvalue, mainwidth - loffset),
            last: new THREE.Vector3(maingridcrement , zeroheight ,  mainwidth - loffset),
            beamorigin: new THREE.Vector3(maingridcrement  + maniarry[i] , zeroheight, mainwidth + loffset),
            beamlast: new THREE.Vector3(maingridcrement  + maniarry[i] , firstheight,  mainwidth  + windarry[windarry.length-1]),  
            columnstartdepthMeters: 650,
            columnenddepthMeters: 1200,
            diameter: 24,
            thickness: 50,
        };
    
    
        // console.log("Origin =",rafter.origin);
        // console.log("Last =",rafter.last);
        // console.log("Beam Origin =",rafter.beamorigin);
        // console.log("Beam Last =",rafter.beamlast);
        // Push the generated column props to the array
        columnProps.push(rafter);

        maingridcrement = maingridcrement + maniarry[i]
    }


    rafter = {
        
        startDepthMeters: 1200,
        endDepthMeters: 800,
        topFlangeMeters: 250,
        bottomFlangeMeters: 250,
        webThicknessMeters: 6,
        topFlangeThicknessMeters: 12,
        bottomFlangeThicknessMeters: 12,
        origin: new THREE.Vector3(maingridcrement , sumvalue, mainwidth + loffset),
        last: new THREE.Vector3(maingridcrement , zeroheight , mainwidth + loffset),
        beamorigin: new THREE.Vector3( 0 + woffset , zeroheight, mainwidth + loffset),
        beamlast: new THREE.Vector3( 0 + woffset , firstheight, mainwidth +  windarry[windarry.length -1]),  
        columnstartdepthMeters: 650,
        columnenddepthMeters: 1200,
        diameter: 24,
        thickness: 50,
    };


    // console.log("Origin =",rafter.origin);
    // console.log("Last =",rafter.last);
    // console.log("Beam Origin =",rafter.beamorigin);
    // console.log("Beam Last =",rafter.beamlast);
    // Push the generated column props to the array
    columnProps.push(rafter);


    rafter = {
        startDepthMeters: 1200,
        endDepthMeters: 800,
        topFlangeMeters: 250,
        bottomFlangeMeters: 250,
        webThicknessMeters: 6,
        topFlangeThicknessMeters: 12,
        bottomFlangeThicknessMeters: 12,
        origin: new THREE.Vector3(maingridcrement , sumvalue, mainwidth + loffset),
        last: new THREE.Vector3(maingridcrement , zeroheight , mainwidth + loffset),
        beamorigin: new THREE.Vector3( mainlength - woffset , zeroheight, mainwidth + loffset),
        beamlast: new THREE.Vector3( mainlength - woffset , firstheight, mainwidth  + windarry[windarry.length-1]),  
        columnstartdepthMeters: 650,
        columnenddepthMeters: 1200,
        diameter: 24,
        thickness: 50,
    };


    // console.log("Origin =",rafter.origin);
    // console.log("Last =",rafter.last);
    // console.log("Beam Origin =",rafter.beamorigin);
    // console.log("Beam Last =",rafter.beamlast);
    // Push the generated column props to the array
    columnProps.push(rafter);


return (
    <>
        {columnProps.map((props, index) => (
            <Creatmainrafter key={'Rafter' + index} {...props} />
        ))}
    </>
);

};

export default RightRafter;

Everything inside columnProps should be rotated from each one’s origin point at a certain angle.
CreatRafter.js (25.6 KB)
NodirectionFour.js (2.0 KB)
RightSideRafter.js (6.5 KB)