使用 Three.js 创建几何图形变换，展示三维物体的平移、旋转和缩放效果。

function createGeometryTransform() {
    const params = {
        geometryType: 'cube',
        transformType: 'translate',
        transformX: 0.0,
        transformY: 0.0,
        transformZ: 0.0,
        showOriginal: true
    };

    const group = new THREE.Group();

    const originalGeometry = createGeometry(params.geometryType);
    const originalMaterial = new THREE.MeshStandardMaterial({ 
        color: 0x444444,
        wireframe: true,
        transparent: true,
        opacity: 0.5
    });
    const originalMesh = new THREE.Mesh(originalGeometry, originalMaterial);
    
    if(params.showOriginal) {
        group.add(originalMesh);
    }

    const transformedGeometry = createGeometry(params.geometryType);
    const transformedMaterial = new THREE.MeshStandardMaterial({ 
        color: 0x00b4d8,
        metalness: 0.3,
        roughness: 0.7
    });
    const transformedMesh = new THREE.Mesh(transformedGeometry, transformedMaterial);

    applyTransform(transformedMesh, params);
    group.add(transformedMesh);

    return group;
}

function createGeometry(type) {
    switch(type) {
        case 'cube':
            return new THREE.BoxGeometry(2, 2, 2);
        case 'sphere':
            return new THREE.SphereGeometry(1, 32, 32);
        case 'cylinder':
            return new THREE.CylinderGeometry(1, 1, 2, 32);
        case 'cone':
            return new THREE.ConeGeometry(1, 2, 32);
        default:
            return new THREE.BoxGeometry(2, 2, 2);
    }
}

function applyTransform(mesh, params) {
    switch(params.transformType) {
        case 'translate':
            mesh.position.set(params.transformX, params.transformY, params.transformZ);
            break;
        case 'rotate':
            mesh.rotation.set(
                params.transformX * Math.PI / 180,
                params.transformY * Math.PI / 180,
                params.transformZ * Math.PI / 180
            );
            break;
        case 'scale':
            mesh.scale.set(
                1 + params.transformX,
                1 + params.transformY,
                1 + params.transformZ
            );
            break;
    }
}

function createGUI() {
    const gui = new GUI();
    
    const params = {
        geometryType: 'cube',
        transformType: 'translate',
        transformX: 0.0,
        transformY: 0.0,
        transformZ: 0.0,
        showOriginal: true,
        regenerate: () => {
            scene.remove(geometryTransform);
            geometryTransform = createGeometryTransform();
            scene.add(geometryTransform);
        }
    };

    const geometryFolder = gui.addFolder('几何图形');
    geometryFolder.add(params, 'geometryType', ['cube', 'sphere', 'cylinder', 'cone'])
        .name('图形类型')
        .onChange(params.regenerate);
    geometryFolder.open();

    const transformFolder = gui.addFolder('几何变换');
    transformFolder.add(params, 'transformType', ['translate', 'rotate', 'scale'])
        .name('变换类型')
        .onChange(params.regenerate);
    transformFolder.add(params, 'transformX', -5, 5, 0.1)
        .name('变换X')
        .onChange(params.regenerate);
    transformFolder.add(params, 'transformY', -5, 5, 0.1)
        .name('变换Y')
        .onChange(params.regenerate);
    transformFolder.add(params, 'transformZ', -5, 5, 0.1)
        .name('变换Z')
        .onChange(params.regenerate);
    transformFolder.add(params, 'showOriginal')
        .name('显示原图形')
        .onChange(params.regenerate);
    transformFolder.open();
}