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

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

📋 AI 提示词

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

---

🖼️ 效果预览

---

🎮 案例演示

立即体验

---

效果描述

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

效果特性

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

核心参数

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

核心代码解析

创建几何变换

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控制

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

技术亮点

1. 几何变换：展示几何变换
2. 平移变换：实现平移变换
3. 旋转变换：实现旋转变换
4. 缩放变换：实现缩放变换
5. 组合变换：实现组合变换

调试技巧

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

扩展方向

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

---

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