three.js CylinderGeometry上下半径参数调整不符合预期问题求助

问题根源 #

你遇到的问题完全是PHP侧参数处理错误导致的：

• PHP内置的number_format()默认仅保留0位小数，且会自动添加英文逗号作为千位分隔符，你传入的3.4、2.5这类小数会被直接取整为3，所以小幅度调整参数时前端完全没有变化
• 当参数数值差足够大时，要么取整后的数值偏差过大，要么生成带逗号的无效数字字符串，传给Three.js后解析错误，就会出现沙漏状的异常模型
• 你输出参数到JS时额外加了引号，把数值转为字符串类型，也增加了类型解析的隐患

修复步骤 #

1. 修改PHP参数处理逻辑 #

将原来的参数处理代码替换为下方内容，指定保留1位小数、禁用千位分隔符：

<?php 
$imgname = isset($_GET['filename']) ? $_GET['filename'] : 'defaultimage.png';
$savename = isset($_GET['filename']) ? $_GET['filename'] : 'glassfrontview.png';
// 保留1位小数，用英文点作为小数点，无千位分隔符
$topdiameter = isset($_GET['td']) ? number_format((float)$_GET['td'], 1, '.', '') : '3.0';
$bottomdiameter = isset($_GET['bd']) ? number_format((float)$_GET['bd'], 1, '.', '') : '3.0';
$height = isset($_GET['h']) ? number_format((float)$_GET['h'], 1, '.', '') : '6.3';
$camangle = isset($_GET['ca']) ? number_format((float)$_GET['ca'], 1, '.', '') : '1.5';
$camdist = isset($_GET['cd']) ? number_format((float)$_GET['cd'], 1, '.', '') : '8.0';
?>

如果你需要更高精度，把第二个参数1改成你需要的小数位数即可。

2. 移除JS代码中参数外的多余引号 #

修改CylinderGeometry实例化和相机位置设置的代码，去掉参数外层的引号，直接输出数值类型：

// 相机位置设置去掉引号
camera.position.set(0, <?php echo $camangle; ?>, <?php echo $camdist; ?>);

// CylinderGeometry实例化去掉引号
const paintgeom = new THREE.CylinderGeometry(<?php echo $topdiameter; ?>, <?php echo $bottomdiameter; ?>, <?php echo $height; ?>, 100, 1, true);

3. 可选校验 #

如果需要确认参数是否正确传递，可以在JS代码开头加一行打印参数：

console.log('传入参数：', {
  topdiameter: <?php echo $topdiameter; ?>,
  bottomdiameter: <?php echo $bottomdiameter; ?>,
  height: <?php echo $height; ?>,
  camangle: <?php echo $camangle; ?>,
  camdist: <?php echo $camdist; ?>
});

打开浏览器控制台即可看到实际传入Three.js的参数值，确认是否和URL传入的参数一致。

补充说明 #

Three.js的CylinderGeometry前两个参数是上下半径，如果你URL传入的是直径值，记得在输出前除以2即可得到预期的尺寸效果。

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