使用map方法创建three.js组件

// 导入three.js库
import * as THREE from 'three';

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

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

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

// 创建一个组件数组
const components = ['cube', 'sphere', 'cylinder'];

// 使用map方法创建组件
const meshes = components.map(component => {
  let geometry, material, mesh;

  if (component === 'cube') {
    geometry = new THREE.BoxGeometry();
    material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    mesh = new THREE.Mesh(geometry, material);
  } else if (component === 'sphere') {
    geometry = new THREE.SphereGeometry();
    material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    mesh = new THREE.Mesh(geometry, material);
  } else if (component === 'cylinder') {
    geometry = new THREE.CylinderGeometry();
    material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
    mesh = new THREE.Mesh(geometry, material);
  }

  scene.add(mesh);
  return mesh;
});

// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  meshes.forEach(mesh => {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.01;
  });
  renderer.render(scene, camera);
}
animate();