Three.js创建简易GUI报错：THREE.GUI不是构造函数的解决方法

1. GUI构造函数归属错误：你引入的lil-gui并非Three.js核心库的一部分，它的构造函数是全局的GUI，而非THREE.GUI，直接调用THREE.GUI()必然报错。
2. 脚本引入问题：
   • 本地路径写法错误，\.\是无效格式；且lil-gui.module.min.js是ES模块，用普通<script>标签引入会触发模块加载问题。
   • OrbitControls的本地路径同样错误，本地文件路径需确保文件实际存在，更推荐用CDN引入适配对应Three.js版本的资源。
3. 代码逻辑问题：
   • enlargeDoge函数内的sphere是局部变量，外部无法访问，导致scene.add(sphere)和动画函数中的sphere.rotation均会报错。
   • GUI控件绑定目标错误，add(0, 'radius')中的0是数字，不存在radius属性，无法完成参数绑定。
   • 每次调用enlargeDoge都重新创建球体、加载纹理，既浪费资源又因纹理异步加载导致显示异常，应直接修改现有球体的参数而非重复创建。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Three.js GUI Slider for Sphere Radius</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <!-- 使用CDN引入对应版本的资源，避免本地路径问题 -->
        <script src="https://cdn.jsdelivr.net/npm/three@0.143/build/three.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/controls/OrbitControls.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lil-gui@0.16.1/dist/lil-gui.umd.min.js"></script>

        <script>
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
            camera.position.set( 0, 0, 50 );
            camera.lookAt( 0, 0, 0 );
            
            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            // 全局存储球体对象，方便后续修改
            let sphere;
            // 仅加载一次纹理，避免重复请求
            const texture = new THREE.TextureLoader().load( 'https://i.imgur.com/SaUx1mi.jpg' );

            // 初始化球体
            function initSphere(radius = 10) {
                const geometry = new THREE.SphereGeometry( radius, 32, 16 );
                const material = new THREE.MeshBasicMaterial( { map: texture } );
                sphere = new THREE.Mesh( geometry, material );
                scene.add(sphere);
            }

            initSphere();

            // 使用全局GUI构造函数创建控件
            const gui = new GUI();
            const folderDoge = gui.addFolder( 'Doge Size' );
            // 创建参数对象用于GUI绑定
            const params = { radius: 10 };
            folderDoge.add( params, 'radius', 1, 50, 1)
                .onChange( (value) => {
                    // 释放旧几何体资源避免内存泄漏，更新球体几何体
                    sphere.geometry.dispose();
                    sphere.geometry = new THREE.SphereGeometry( value, 32, 16 );
                });
            folderDoge.open();

            const controls = new THREE.OrbitControls( camera, renderer.domElement );
            controls.update();

            function animate() 
            {
                requestAnimationFrame( animate );
                sphere.rotation.y += 0.01;
                renderer.render( scene, camera );
            };

            animate();

            // 适配窗口大小变化
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
        </script>
    </body>
</html>

• GUI构造函数：改用全局new GUI()替代THREE.GUI()，因为lil-gui是独立库，不挂载在Three.js命名空间下。
• 资源引入：全部使用CDN引入对应版本的资源，避免本地路径错误，同时选择非模块版本的lil-gui适配普通脚本标签。
• 对象管理：将sphere设为全局变量，确保动画和场景操作能正常访问。
• GUI参数绑定：创建专门的params对象存储半径值，绑定到GUI控件，修改时更新球体几何体并释放旧资源。
• 性能优化：仅加载一次纹理，避免重复网络请求。

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