three.js+vue实现机械臂摆动

以下是使用three.js和Vue实现机械臂摆动的示例代码：

<template>
  <div ref="container"></div>
</template>

<script>
import * as THREE from 'three';

export default {
  mounted() {
    // 创建场景
    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({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.container.appendChild(renderer.domElement);

    // 创建机械臂
    const arm = new THREE.Object3D();
    const base = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshNormalMaterial()
    );
    base.position.y = 0.5;
    arm.add(base);

    const joint1 = new THREE.Mesh(
      new THREE.SphereGeometry(0.5),
      new THREE.MeshNormalMaterial()
    );
    joint1.position.y = 1;
    arm.add(joint1);

    const link1 = new THREE.Mesh(
      new THREE.BoxGeometry(0.5, 2, 0.5),
      new THREE.MeshNormalMaterial()
    );
    link1.position.y = 2;
    arm.add(link1);

    const joint2 = new THREE.Mesh(
      new THREE.SphereGeometry(0.5),
      new THREE.MeshNormalMaterial()
    );
    joint2.position.y = 3;
    arm.add(joint2);

    const link2 = new THREE.Mesh(
      new THREE.BoxGeometry(0.5, 2, 0.5),
      new THREE.MeshNormalMaterial()
    );
    link2.position.y = 4;
    arm.add(link2);

    const joint3 = new THREE.Mesh(
      new THREE.SphereGeometry(0.5),
      new THREE.MeshNormalMaterial()
    );
    joint3.position.y = 5;
    arm.add(joint3);

    const link3 = new THREE.Mesh(
      new THREE.BoxGeometry(0.5, 2, 0.5),
      new THREE.MeshNormalMaterial()
    );
    link3.position.y = 6;
    arm.add(link3);

    scene.add(arm);

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

    // 渲染场景
    const animate = () => {
      requestAnimationFrame(animate);

      arm.rotation.x += 0.01;
      arm.rotation.y += 0.01;

      renderer.render(scene, camera);
    };
    animate();
  },
};
</script>

这段代码创建了一个机械臂模型，并通过旋转机械臂的角度来实现摆动效果。你可以将这段代码放入Vue组件中，然后在页面中渲染出来。