Threejs入门之十四：Threejs中的组(Group)对象

这篇文章距离上次修改已过241天，其中的内容可能已经有所变动。

在Three.js中，组（Group）对象是一种特殊类型的对象，它可以用来容纳和管理多个3D对象（如网格、材质、灯光等）。通过将这些对象添加到组中，可以将它们作为一个单一的实体进行变换、渲染和交互。

下面是创建一个组并向其中添加几个不同的3D对象的示例代码：

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

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

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

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建几个不同的网格对象
const mesh1 = new THREE.Mesh(geometry, material);
const mesh2 = new THREE.Mesh(geometry, material);
const mesh3 = new THREE.Mesh(geometry, material);

// 创建一个组并添加网格对象
const group = new THREE.Group();
group.add(mesh1);
group.add(mesh2);
group.add(mesh3);

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

// 设置相机位置并指向组的中心
camera.position.z = 5;

// 渲染循环
function animate() {
  requestAnimationFrame(animate);

  // 旋转组中的所有对象
  group.rotation.x += 0.01;
  group.rotation.y += 0.01;

  // 渲染场景
  renderer.render(scene, camera);
}

animate();

在这个例子中，我们创建了一个包含3个网格对象的组，并将它添加到场景中。然后，我们在渲染循环中旋转这个组，从而使其中的所有网格对象一起旋转。这种方式可以用来创建复杂的3D对象，这些对象由许多小部件组成，可以以一个单元的形式进行管理和变换。

Threejs入门之十四：Threejs中的组(Group)对象

评论已关闭

推荐阅读