vue2 threejs如何使用webgl2

Vue2 和 Three.js 结合使用WebGL2通常需要遵循一些步骤，因为Three.js默认支持WebGL2，而Vue是一个用于构建用户界面的框架。以下是基本流程：

1. **安装依赖**：
首先，确保已经安装了Vue、npm或yarn，然后安装Three.js库以及可能需要的loader模块，比如`@vue/web-component-wrapper`（如果你打算将Three.js组件封装成Vue组件）。

   npm install three @vue/web-component-wrapper

2. **创建Three.js组件**：
创建一个名为`WebGL2Scene.vue`的文件，并使用`<template>`、`<script>`和`<style>`标签定义组件结构和样式，同时利用`setup()`函数初始化Three.js场景。

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

   <script setup>
   import { createRef } from 'vue';
   import * as THREE from 'three';

   const container = createRef(null);
   let scene, camera, renderer;

   async function init() {
       // 初始化WebGL2渲染器
       renderer = new THREE.WebGLRenderer({ context: {antialias: true, alpha: true}, alpha: true, powerPreference: "high-performance" });
       renderer.setPixelRatio(window.devicePixelRatio);
       renderer.setSize(window.innerWidth, window.innerHeight);
       container.value.appendChild(renderer.domElement);

       // ... 其他Three.js初始化代码
   }

   onMounted(() => {
       init();
       // 添加动画、物体等...
   });

   // 渲染循环
   function animate() {
       requestAnimationFrame(animate);
       renderer.render(scene, camera);
   }
   
   </script>

3. **Vue组件内使用**：
在Vue组件中，你可以直接实例化这个WebGL2Scene组件并监听窗口大小变化调整渲染器大小，例如：

   <template>
     <WebGL2Scene :width.sync="windowWidth" :height.sync="windowHeight"/>
   </template>

   <script>
   export default {
     data() {
       return {
         windowHeight: window.innerHeight,
         windowWidth: window.innerWidth
       };
     },
     mounted() {
       window.addEventListener('resize', () => {
         this.windowWidth = window.innerWidth;
         this.windowHeight = window.innerHeight;
       });
     }
   }
   </script>