javascript - 更改three.js CylinderGeometry 顶部（或底部）半径问题

Question

我有以下代码，允许我使用 url 参数即时更改三个.js 值中的一些值，并且它的那一面按我的预期工作..

<?php 
$imgname = isset($_GET['filename']) ? $_GET['filename'] : 'defaultimage.png';
$savename = isset($_GET['filename']) ? $_GET['filename'] : 'glassfrontview.png';
$topdiameter = isset($_GET['td']) ? number_format($_GET['td']) : number_format('3');
$bottomdiameter = isset($_GET['bd']) ? number_format($_GET['bd']) : number_format('3');
$height = isset($_GET['h']) ? number_format($_GET['h']) : number_format('6.3');
$camangle = isset($_GET['ca']) ? number_format($_GET['ca']) : number_format('1.5');
$camdist = isset($_GET['cd']) ? number_format($_GET['cd']) : number_format('8');
?>
<script src="js/three.js"></script> 
        <script>
actualCode(THREE);
function actualCode(THREE) {
    
    let texture;

    //Preload image, then trigger rendering
    const loader = new THREE.TextureLoader();
    //Example with image hosted from Imgur:
    texture = loader.load("images/<?php echo $imgname; ?>", function(_tex) {
        console.log("texture loaded");
        // /*Debugging:*/ setTimeout(() => document.body.appendChild(texture.image), 100);
        //views 17.5=front | 355=side | 139.6=back
        renderImageSolo(355);
    });

    function renderImageSolo(angle) {
        //Init just main renderer / scene
        const solo_renderer = new THREE.WebGLRenderer({
            antialias: true,
            preserveDrawingBuffer: false, // <-- avoid plain black image
            alpha: true
        });
        solo_renderer.setSize(500, 500);
        document.body.appendChild(solo_renderer.domElement);
        const solo_scene = new THREE.Scene();
        
        //Init camera orig values =(30, 400.0 / 400, 1, 1000)
        const camera = new THREE.PerspectiveCamera(100, 500.0 / 500, 1, 100);
        camera.position.set(0, "<?php echo $camangle; ?>", "<?php echo $camdist; ?>");
        camera.lookAt(solo_scene.position);
  
        //Draw painting alone orig values -= (1.5, 1.5, 8.3, 240, 1, true)
        const paintgeom = new THREE.CylinderGeometry("<?php echo $topdiameter; ?>", "<?php echo $bottomdiameter; ?>", "<?php echo $height; ?>", 100, 1, true);
        const paintmaterial = new THREE.MeshBasicMaterial( { map: texture, wireframe: false, transparent: true } );
        
        const paint = new THREE.Mesh(paintgeom, paintmaterial);
        
        
        //Add paint to scene
        solo_scene.add(paint);
        //Rotate paint by angle
        paint.rotation.y = angle;
        //paint.color.set(0xddd8d9);
        //Draw result
        //solo_scene.background = new THREE.Color(0x000000, 0);
        solo_renderer.setClearColor( 0xddd8d9, 0 ); // the default
        solo_renderer.render(solo_scene, camera);
        
        //Save result
        saveImage(solo_renderer.domElement, "<?php echo $savename; ?>");

            }

    //Save canvas as image by posting it to special url on server
    function saveImage(canvas, filename) {
        const dataUrl = canvas.toDataURL("image/png");
        const fileNameEnc = encodeURIComponent(filename);
        fetch('./photo_upload.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `data=${dataUrl}&filename=${fileNameEnc}`,
        })
        .then(response => {
            return response.json();
        })
        .then(data => {
            console.log(data.message); //Show ajax result
        })
        .catch(err => { //Handle errors
            console.log(err);
            console.log(err.message);
        });
    }
};
        </script>

我遇到的问题是，当我更改顶部和底部半径值时，它们不会按预期工作，我希望它们在我更改值时实际上变得更大或更小，而不是半径似乎没有如果我向上或向下移动几个值，那么如果我走得很远，图像就会变成沙漏状？

如果值是顶部半径 3 和底部 3，我会得到这个（预期结果）..

但是，如果我将值更改为顶部半径 3.4 和底部 2.5，图像保持不变！然后，如果我将顶部更改为更高或底部更改为更低，它就会变成沙漏形状......

当我期望的会更像这样...

标签： javascriptthree.js