threejs实现组装模型代码

这里提供一个简单的 threejs 实现组装模型的代码示例：

// 创建场景
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 geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

// 将物体添加到场景中
scene.add(cube);

// 创建控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);

// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

// 组装模型
function assembleModel() {
  const cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 2, 32);
  const cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);

  const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
  const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

  cylinder.position.x = -2;
  sphere.position.x = 2;

  cube.add(cylinder);
  cube.add(sphere);
}

// 调用组装模型函数
assembleModel();

这段代码先创建了一个场景、相机和渲染器，然后创建了一个方块物体并将其添加到场景中。然后使用 OrbitControls 控制器实现交互控制，最后定义了一个组装模型的函数，将圆柱体和球体添加到方块物体中。最后调用组装模型函数即可。