Three.js 对象分组

// 创建一个Group和一个简单的网格对象
const group = new THREE.Group();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const boxMesh = new THREE.Mesh(geometry, material);
 
// 使用 add() 将网格添加到 group 中
group.add(boxMesh);
console.log(group.children.length); // 输出 1
 
// 使用 remove() 将网格从 group 中移除
group.remove(boxMesh);
console.log(group.children.length); // 输出 0

// 假设 group 中已添加多个网格对象
group.children.forEach((child, index) => {
  // 可以判断 child 的类型，或统一修改属性
  if (child instanceof THREE.Mesh) {
    child.material.color.set(0x00ff00); // 全部改为绿色
    console.log(`子对象索引：${index}`, child);
  }
});

// 创建一个 Group 并添加多个子对象
const groupTransform = new THREE.Group();
scene.add(groupTransform);
 
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(0.5, 32, 32),
  new THREE.MeshStandardMaterial({ color: 0x0000ff })
);
const cone = new THREE.Mesh(new THREE.ConeGeometry(0.5, 1, 16), new THREE.MeshStandardMaterial({ color: 0xffff00 }));
 
// 加入 Group
groupTransform.add(sphere);
groupTransform.add(cone);
 
// 统一设置位置：向 X 方向平移 3 个单位
groupTransform.position.set(3, 0, 0);
 
// 统一旋转：绕 Z 轴旋转 45 度（π/4）
groupTransform.rotation.z = Math.PI / 4;
 
// 统一缩放：在 X、Y、Z 方向均放大 1.5 倍
groupTransform.scale.set(1.5, 1.5, 1.5);

import * as THREE from "three";
import "./style.css";
 
function initScene() {
  // 1. 创建场景、相机、渲染器
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    60, // FOV: 视场角度
    window.innerWidth / window.innerHeight, // 宽高比
    0.1, // 近截面
    1000 // 远截面
  );
  camera.position.set(0, 0, 20); // 将相机放在稍微高一点，往后一点的位置
 
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
 
  // 2. 添加一个基础光源
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(ambientLight);
 
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(10, 20, 10);
  scene.add(directionalLight);
 
  // 3. 创建一些简单对象，用以模拟建筑和树木
  const geometryHouse = new THREE.BoxGeometry(4, 4, 4);
  const materialHouse = new THREE.MeshStandardMaterial({ color: 0x8b4513 });
  const house = new THREE.Mesh(geometryHouse, materialHouse);
  house.position.set(0, 2, 0); // 让房子底部对准地面
 
  const geometryTree = new THREE.CylinderGeometry(0.5, 0.5, 3, 8);
  const materialTree = new THREE.MeshStandardMaterial({ color: 0x006400 });
  const tree = new THREE.Mesh(geometryTree, materialTree);
  tree.position.set(-3, 1.5, 3);
 
  // 4. 创建 Group，并将这些对象加入其中
  const group = new THREE.Group();
  group.add(house);
  group.add(tree);
 
  // // 将 group 整体放置在场景中心偏左的区域
  // group.position.set(-5, 0, 0);
 
  // 5. 添加到场景
  scene.add(group);
 
  // 6. 动画循环
  function animate() {
    requestAnimationFrame(animate);
 
    renderer.render(scene, camera);
  }
 
  animate();
}
 
initScene();