When I pass the values to three.js like so..

const paintgeom = new THREE.CylinderGeometry(2.5, 1.5, 3.3, 240, 1, true);

The result looks like this (all is as expected)..

However if i pass the same as a var like so..

var trad = '2.5';
const paintgeom = new THREE.CylinderGeometry(trad, 1.5, 3.3, 240, 1, true);

I get very weird 'pinch' or 'hourglass' type results like this..

I have also tried passing the params as a php echo but get the same odd result? How can I pass these numbers to the script and not have to hard code them in please?

I have also put the complete code on JSFiddle https://jsfiddle.net/StickerMonkey/ov12fh3s/53/