通过变量或PHP给three.js CylinderGeometry传参出现异常变形如何解决

问题根源 #

THREE.CylinderGeometry构造函数的尺寸参数要求为Number类型，你传入的trad是字符串类型，类型不匹配导致Three.js内部计算顶点坐标时逻辑异常，最终生成了变形的几何体。

解决方法 #

前端侧转换变量类型 #

将字符串类型的参数转换为数字类型后再传入即可，可选以下任意一种转换方式：

• 用parseFloat()转换浮点数：

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

• 用Number()构造函数转换：

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

• 用加号前缀做隐式转换：

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

PHP输出时直接输出数值 #

如果参数是从PHP输出到前端，不要用引号包裹数值，直接输出数字类型即可：

// 错误示例（输出为字符串）
// echo "var trad = '{$trad}';";
// 正确示例（输出为数字）
$trad = (float)$trad; // 确保PHP变量为数值类型
echo "var trad = {$trad};";

内容的提问来源于stack exchange，提问作者Glen Keybit