# React Three Fiber , Geometry Rotation

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)