# Convert pixel coordinates to 3d vector

Position a 3D dress model onto the center of left and right shoulder key points detected from the pose model.

Hi, I detect human body pose from a webcam using TensorFlow pose. I want to place my 3d dress in the center of the left and right shoulder. I’m converting the pixel X Y coordinates to 3D coordinates but the 3d dress in not positioned at the exact location.
My calculations:
let x_avg = (leftShoulderX + rightShoulderX) / 2
let y_avg = (leftShoulderY + rightShoulderY) / 2
mapWebcamTo3D(x_avg,y_avg,0)

function mapWebcamTo3D(webcamX, webcamY, depth) {

const videoFrameWidth = webcamRef.current.video.videoWidth;

const videoFrameHeight= webcamRef.current.video.videoHeight;

const desired3DWidth = 100; // The width of your 3D space in your desired unit (e.g., meters)

// Define the desired 3D space dimensions

const desired3DHeight = (desired3DWidth / videoFrameWidth) * videoFrameHeight;

// Calculate the scale factors for X and Y

const scaleX = desired3DWidth / videoFrameWidth;

const scaleY = desired3DHeight / videoFrameHeight;

// Calculate the 3D coordinates

const x3D = (webcamX - videoFrameWidth / 2) * scaleX;

const y3D = (videoFrameHeight / 2 - webcamY) * scaleY;

const z3D = depth;
}

My 3d Model:

function Model({…props}) {
const group = useRef()
const { nodes, materials } = useGLTF(‘/Red_Blouse_GLTF.txt’)
console.log("model: ", props.dimension.x, props.dimension.y )
return (
<group ref={group} {…props} dispose={null} scale={10} position={[props.dimension.x, -props.dimension.y, 0]} >
// //

}
<Webcam
ref={webcamRef}
style={{
position: “absolute”,
marginLeft: “auto”,
marginRight: “auto”,
left: 0,
right: 0,
textAlign: “center”,
zindex: 9,
width: 640,
height: 480,
}}
/>

<Model dimension={{x:XAvg, y:YAvg }}/>