如何等比例缩小几何体？(three.js)

function initScene() {
scene = new THREE.Scene();
// const texture = new THREE.TextureLoader().load("./ks.png");
// texture.colorSpace = THREE.SRGBColorSpace;
// scene.background = texture;
// 创建底座几何体
// 导入纹理加载器
const textureLoader = new THREE.TextureLoader();

// 加载纹理图片
const texture = textureLoader.load('./bgImage.png');
texture.colorSpace = THREE.SRGBColorSpace;
// 使用纹理创建材质
const baseMaterial = new THREE.MeshBasicMaterial({ map: texture });

// 创建几何体
const baseGeometry = new THREE.BoxGeometry(82.5, 41);

// 创建网格对象
const base = new THREE.Mesh(baseGeometry, baseMaterial);

// 将网格对象添加到场景
scene.add(base);
}

    function initCamera() {
        camera = new THREE.PerspectiveCamera(
            45,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );
        camera.position.set(0, 0, 50);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
    }

    function initLight() {
        const ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight("#fff");
        directionalLight.position.set(30, 30, 30).normalize();
        scene.add(directionalLight);

        const spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);
    }

    function initModel() {
        initFlowingLine();
        initSecondFlowingLine();
    }

    function initArrowLine() {
        const geometry = new THREE.PlaneGeometry(20, 2, 32);
        arrowLineTexture = new THREE.TextureLoader().load("./Newyjt.png");
        arrowLineTexture.wrapS = arrowLineTexture.wrapT = THREE.RepeatWrapping;
        arrowLineTexture.repeat.set(10, 1);
        arrowLineTexture.needsUpdate = true;

        let materials = new THREE.MeshBasicMaterial({
            map: arrowLineTexture,
            side: THREE.DoubleSide,
        });
        const mesh = new THREE.Mesh(geometry, materials);
        scene.add(mesh);
    }

要等比例缩小一个 3D 几何体，需要按相同的比例缩小几何体的所有尺寸。这可以通过调整几何体的缩放（scale）来实现。在 THREE.js 中，可以使用 .scale 属性来缩放物体，该属性是一个 THREE.Vector3 对象，分别代表在 x、y、z 轴上的缩放比例。

在 initScene 中等比例缩小几何体

创建了一个几何立方体（BoxGeometry），可以通过 base.scale 来等比例缩小它。

function initScene() {
    scene = new THREE.Scene();
    
    // 导入纹理加载器
    const textureLoader = new THREE.TextureLoader();
    
    // 加载纹理图片
    const texture = textureLoader.load('./bgImage.png');
    texture.colorSpace = THREE.SRGBColorSpace;
    
    // 使用纹理创建材质
    const baseMaterial = new THREE.MeshBasicMaterial({ map: texture });
    
    // 创建几何体
    const baseGeometry = new THREE.BoxGeometry(82.5, 41, 10);  // 立方体，设置宽、高、深度
    
    // 创建网格对象
    const base = new THREE.Mesh(baseGeometry, baseMaterial);
    
    // 等比例缩小几何体（假设缩小比例是0.5）
    const scaleFactor = 0.5;
    base.scale.set(scaleFactor, scaleFactor, scaleFactor);  // 等比例缩小
    
    // 将网格对象添加到场景
    scene.add(base);
}

等比例缩小不同几何体

可以通过相同的 .scale 属性来实现等比例缩小

缩小球体

function initScene() {
    scene = new THREE.Scene();
    
    // 创建一个球体
    const sphereGeometry = new THREE.SphereGeometry(10, 32, 32); // 半径为 10
    const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0077ff });
    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    
    // 等比例缩小球体（假设缩小比例是0.5）
    sphere.scale.set(0.5, 0.5, 0.5);  // 等比例缩小
    
    scene.add(sphere);
}

缩小平面几何体（比如箭头线）

function initArrowLine() {
    const geometry = new THREE.PlaneGeometry(20, 2, 32);
    
    // 加载箭头线纹理
    const arrowLineTexture = new THREE.TextureLoader().load("./Newyjt.png");
    arrowLineTexture.wrapS = arrowLineTexture.wrapT = THREE.RepeatWrapping;
    arrowLineTexture.repeat.set(10, 1);
    arrowLineTexture.needsUpdate = true;

    let materials = new THREE.MeshBasicMaterial({
        map: arrowLineTexture,
        side: THREE.DoubleSide,
    });
    
    const mesh = new THREE.Mesh(geometry, materials);
    
    // 等比例缩小平面几何体（假设缩小比例是0.5）
    mesh.scale.set(0.5, 0.5, 0.5);  // 等比例缩小
    
    scene.add(mesh);
}

缩放多个物体 放入一个父物体并整体缩放

function initScene() {
    scene = new THREE.Scene();
    
    // 创建底座几何体
    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load('./bgImage.png');
    texture.colorSpace = THREE.SRGBColorSpace;
    const baseMaterial = new THREE.MeshBasicMaterial({ map: texture });
    const baseGeometry = new THREE.BoxGeometry(82.5, 41, 10);  // 立方体，宽高深
    const base = new THREE.Mesh(baseGeometry, baseMaterial);
    
    // 创建另一个几何体（例如球体）
    const sphereGeometry = new THREE.SphereGeometry(10, 32, 32); // 半径为 10
    const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0077ff });
    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    
    // 创建一个父物体，并将立方体和球体添加到其中
    const group = new THREE.Group();
    group.add(base);
    group.add(sphere);
    
    // 为父物体设置缩放比例（缩放所有子物体）
    group.scale.set(0.5, 0.5, 0.5);  // 等比例缩小
    
    scene.add(group);
}()

//group.scale.set(0.5, 0.5, 0.5) 会将 base 和 sphere 这两个子物体等比例缩小

• 缩放后，物体的形状和相对尺寸保持不变，只是物体的整体尺寸被缩小。
• 物体的所有坐标、位置、旋转等不会改变，只有物体的大小被调整。

通过在 THREE.js 中使用 .scale.set(x, y, z) 来等比例缩小物体，可以轻松实现对各种几何体的缩放操作。通过 group 组合多个物体后，可以统一缩放整个物体集。等比例缩放是调整物体大小但保持其形状不变的一种常用技巧，适用于任何 3D 对象。