I have a problem, so i have this model and i use Three Edge Projeciton to get the projection. So the way i do it is a load my gltf model.
I took the projection which is Line Segments, and i set the projection to a useState.
After i use that projection and draw it as linesegments on a scene:
projection = new LineSegments(
new BufferGeometry(),
new LineBasicMaterial({ color: 0xffbf00 }),
);
setMyProjection(projection)
In the threejs scene i do this:
const LineSegments = ({ myProjection }) => {
return myProjection ? <primitive object={myProjection} /> : null;
};
<Canvas
style={{ height: '100vh' }}
camera={{
position: [0, 50, 0], // Position the camera 5 units up along the y-axis
fov: 75, // Field of view
near: 0.1, // Near clipping plane
far: 1000, // Far clipping plane
}}
>
<ambientLight intensity={0.5} />
<directionalLight position={[2, 5, 2]} intensity={1} />
<LineSegments myProjection={elevWest} />
</Canvas>
Which works the way I want it to:
As you can see here:
And I want to use the same myProjection Line Segmenets and draw it via jspdf.
This is the code I use
const points = geometry.attributes.position.array;
for (let i = 0; i < points.length; i += 6) {
if (i + 3 < points.length) {
let x1, x2, y1, y2;
x1 = points[i] * scaleFactor + (offsetX + 10);
y1 = points[i + 2] * scaleFactor + (offsetY + 10);
x2 = points[i + 3] * scaleFactor + (offsetX + 10);
y2 = points[i + 5] * scaleFactor + (offsetY + 10);
}
doc.setLineWidth(5); // Set line width
}
}
So this is just techincally iterating over the points. I looked through the code on the github and I am unsure why its happening, and why it doesnt happen on the threejs. I would image its the camera, but im not sure how drawing the line segments in threejs is different in pdf. Does anyone know how to fix it so that it works on jspdf?