threejs 画交换机并可以旋转

好的，为了让交换机可以旋转，您可以将交换机放在一个THREE.Group中，然后将这个Group添加到场景中，然后在animate函数中旋转这个Group对象。

以下是一个简单的示例代码，用于绘制一个简单的交换机并使其旋转：

// 创建场景、相机、渲染器
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);

// 创建Group对象
const switchGroup = new THREE.Group();
scene.add(switchGroup);

// 创建材质和几何体
const material = new THREE.MeshPhongMaterial({ color: 0xffffff });
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 0.1, 32);

// 创建交换机各个部分的Mesh对象
const box = new THREE.Mesh(boxGeometry, material);
const cylinder1 = new THREE.Mesh(cylinderGeometry, material);
const cylinder2 = new THREE.Mesh(cylinderGeometry, material);
const cylinder3 = new THREE.Mesh(cylinderGeometry, material);

// 设置各个部分的位置
box.position.set(0, 0, 0);
cylinder1.position.set(-0.3, -0.4, 0.5);
cylinder2.position.set(0.3, -0.4, 0.5);
cylinder3.position.set(0, 0.4, 0.5);

// 将各个部分添加到Group中
switchGroup.add(box);
switchGroup.add(cylinder1);
switchGroup.add(cylinder2);
switchGroup.add(cylinder3);

// 创建光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 0, 5);
scene.add(light);

// 设置阴影
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
light.castShadow = true;
box.castShadow = true;
cylinder1.castShadow = true;
cylinder2.castShadow = true;
cylinder3.castShadow = true;

// 旋转Group对象
function animate() {
  requestAnimationFrame(animate);
  switchGroup.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

这样，您就可以绘制一个简单的交换机并使其旋转了。您可以根据您的需求调整交换机的各个部分的位置、大小和颜色等属性，以实现更加逼真的效果。