threejs Group类，统一变换设置一组立方体

在Three.js中，Group 是一个非常有用的类，它允许你将多个对象组合在一起，并作为一个整体进行操作。这使得管理复杂场景变得更加简单和高效。通过使用 Group，你可以对一组对象执行统一的变换（如平移、旋转、缩放），而无需单独操作每个对象。

主要用途

组合管理：将多个对象组合在一起，便于管理和操作。
统一变换：对整个组应用变换（例如平移、旋转、缩放），而不必逐个操作组内的每个对象。
层次结构：创建对象的层次结构，类似于父子关系，方便构建复杂的3D场景。

基本用法

创建一个 Group

const group = new THREE.Group();

向 Group 中添加对象

你可以将几何体、网格或其他组添加到 Group 中。

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

group.add(cube); // 将立方体添加到组中

将 Group 添加到场景中

scene.add(group); // 将组添加到场景中

对 Group 应用变换

你可以对整个组应用变换，这些变换会自动应用于组中的所有对象。

// 平移
group.position.set(5, 5, 5);

// 旋转
group.rotation.x = Math.PI / 4; // 绕X轴旋转45度
group.rotation.y = Math.PI / 4; // 绕Y轴旋转45度

// 缩放
group.scale.set(2, 2, 2); // 放大两倍

示例代码

以下是一个完整的示例，展示如何使用 Group 来组织和操作多个对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Three.js Group Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        let scene, camera, renderer;

        init();
        animate();

        function init() {
            // 创建场景
            scene = new THREE.Scene();

            // 创建相机
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 10;

            // 创建渲染器
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            // 创建一个组
            const group = new THREE.Group();

            // 创建并添加多个立方体到组中
            for (let i = 0; i < 5; i++) {
                const geometry = new THREE.BoxGeometry(1, 1, 1);
                const material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
                const cube = new THREE.Mesh(geometry, material);

                // 随机位置
                cube.position.set(
                    (Math.random() - 0.5) * 10,
                    (Math.random() - 0.5) * 10,
                    (Math.random() - 0.5) * 10
                );

                group.add(cube); // 将立方体添加到组中
            }

            // 将组添加到场景中
            scene.add(group);

            // 对组应用变换
            group.position.set(0, 0, 0);
            group.rotation.x = Math.PI / 4;
            group.rotation.y = Math.PI / 4;

            // 监听窗口调整大小事件
            window.addEventListener('resize', onWindowResize, false);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate() {
            requestAnimationFrame(animate);

            // 旋转组
            scene.children[0].rotation.x += 0.01;
            scene.children[0].rotation.y += 0.01;

            renderer.render(scene, camera);
        }
    </script>
</body>
</html>

详细解释

初始化部分

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 10;

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
}

创建场景、相机和渲染器，并将其添加到页面中。

创建和配置 Group

const group = new THREE.Group();

for (let i = 0; i < 5; i++) {
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
    const cube = new THREE.Mesh(geometry, material);

    cube.position.set(
        (Math.random() - 0.5) * 10,
        (Math.random() - 0.5) * 10,
        (Math.random() - 0.5) * 10
    );

    group.add(cube);
}

scene.add(group);

group.position.set(0, 0, 0);
group.rotation.x = Math.PI / 4;
group.rotation.y = Math.PI / 4;

创建一个 Group 实例。
循环创建多个立方体，并随机设置它们的位置。
将每个立方体添加到组中。
将组添加到场景中。
对组应用一些初始的变换（位置和旋转）。

动画循环

function animate() {
    requestAnimationFrame(animate);

    scene.children[0].rotation.x += 0.01;
    scene.children[0].rotation.y += 0.01;

    renderer.render(scene, camera);
}

在每一帧中更新组的旋转角度，使组中的所有对象一起旋转。
调用 renderer.render 渲染当前帧。

总结

通过使用 Group，你可以轻松地管理和操作一组3D对象。这种方法不仅简化了代码，还提高了性能和可维护性。无论是创建简单的场景还是复杂的3D应用，Group 都是不可或缺的工具。希望这个示例和解释能帮助你更好地理解和使用 Three.js 中的 Group 类。

posted on 2025-03-05 20:09 joken1310 阅读(5) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· threejs 官方效果创建 2000 个随机分布立方体代码解读

· threejs Vector3 类定义位置

· three.js之Group

· three.js-让物体动起来

· three.js的使用

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义

历史上的今天：
2018-03-05 centos 支持安装libsodium

joken-前端工程师

最新随笔

我的标签

阅读排行榜

评论排行榜

最新评论