Three.js 几何图形变换 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt 复制代码

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

🖼️ 效果预览

🎮 案例演示

立即体验

效果描述

这是一个展示如何创建几何图形变换的示例，展示三维物体的平移、旋转和缩放效果。

效果特性

几何变换：展示几何变换
平移变换：实现平移变换
旋转变换：实现旋转变换
缩放变换：实现缩放变换
组合变换：实现组合变换
原图形显示：显示原图形

核心参数

参数	值	说明
图形类型	立方体	图形类型
变换类型	平移	变换类型
变换量	(0.0, 0.0)	变换量
显示原图形	true	显示原图形

核心代码解析

创建几何变换

javascript 复制代码

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;
    }
}

创建GUI控制

javascript 复制代码

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();
}

技术亮点

几何变换：展示几何变换
平移变换：实现平移变换
旋转变换：实现旋转变换
缩放变换：实现缩放变换
组合变换：实现组合变换

调试技巧

图形类型：调整图形类型观察不同几何体
变换类型：调整变换类型观察不同变换
变换量：调整变换量改变变换效果
原图形显示：调整原图形显示对比变换前后
颜色参数：调整颜色参数改变显示效果

扩展方向

更多变换：添加更多变换类型
动画效果：添加动画效果
交互控制：添加交互控制
变换矩阵：显示变换矩阵
组合变换：支持组合变换

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。