vue3 three.js案例

### Vue3与Three.js结合使用的案例

#### 创建Vue3项目并集成Three.js

为了创建一个基于Vue3的项目，可以使用Vue CLI工具来初始化一个新的项目：

npm install -g @vue/cli
vue create threejs_vue3_demo
cd threejs_vue3_demo

安装完成之后，在新项目的根目录下执行命令以添加Three.js库[^1]。

对于Vue3版本的应用程序来说，推荐通过`@vue/composition-api`插件引入组合API风格的支持（尽管Vue3本身已经内置支持composition API），这有助于更好地管理组件逻辑。不过需要注意的是，自Vue3正式版发布以来，该插件已不再必需，因为Composition API已经成为核心特性的一部分[^2]。

#### 配置环境

在`main.js`文件中确保正确配置了对Three.js的支持：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

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

#### 实现基本场景

下面是一个简单的例子，展示了如何在一个Vue3单文件组件(SFC)内设置基础的Three.js渲染器、相机以及场景对象，并将其挂载到DOM节点上：

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

<script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three';

const sceneContainer = ref(null)

onMounted(() => {
    const width = window.innerWidth / 2
    const height = window.innerHeight / 2
    
    // 初始化场景
    let scene = new THREE.Scene();
    
    // 设置透视摄像机
    let camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.position.z = 5;

    // 添加WebGLRenderer作为canvas画布
    var renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(width, height);

    if (sceneContainer.value){
        sceneContainer.value.appendChild(renderer.domElement);  
        
        // 渲染循环函数
        function animate() {
            requestAnimationFrame(animate);
            
            // 更新动画帧...
            
            renderer.render(scene, camera);
        }
        animate();   
    }
})
</script>

<style scoped>
/* 自定义样式 */
.scene-container {
    margin: auto;
}
</style>

此代码片段实现了最基本的Three.js功能——即建立了一个空白三维空间，并设置了持续更新的画面刷新机制。要使这个应用更加生动有趣，则需进一步向场景中加入几何体、材质和其他交互效果等元素。