vue3 + three 智慧

Vue3和Three.js都是非常流行的前端技术，Vue3是一款现代化的JavaScript框架，而Three.js是一款基于WebGL的3D图形库。它们可以结合使用，实现更加丰富的交互体验和视觉效果。

在Vue3中使用Three.js，可以通过Vue3的生命周期钩子函数来初始化Three.js场景，并在Vue3组件中使用Three.js的API来创建3D模型、添加光源、设置材质等等。

以下是一个简单的示例代码：

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

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

export default {
  mounted() {
    // 初始化场景
    this.scene = new THREE.Scene();

    // 添加相机
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.camera.position.z = 5;

    // 添加渲染器
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.container.appendChild(this.renderer.domElement);

    // 添加立方体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);

    // 渲染场景
    this.animate();
  },
  methods: {
    animate() {
      requestAnimationFrame(this.animate);
      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;
      this.renderer.render(this.scene, this.camera);
    }
  }
}
</script>