vue threejs根据屏幕自动刷新renderer宽高

为了使vue-threejs的renderer能够根据屏幕自动刷新宽高，你可以使用Vue的生命周期函数来实现。具体步骤如下：

1.在Vue组件中引入VueThreejs和Three.js：

import * as VueThreejs from 'vue-threejs'
import * as Three from 'three'

2.在Vue组件中定义renderer和camera：

data() {
  return {
    renderer: null,
    camera: null
  }
},
mounted() {
  // 创建renderer
  this.renderer = new Three.WebGLRenderer({
    antialias: true
  })
  // 创建camera
  this.camera = new Three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
},

3.在Vue组件中定义resize方法，用于在窗口大小改变时更新renderer的宽高：

methods: {
  resize() {
    this.renderer.setSize(window.innerWidth, window.innerHeight)
    this.camera.aspect = window.innerWidth / window.innerHeight
    this.camera.updateProjectionMatrix()
  }
},

4.在Vue组件中使用mounted和beforeDestroy生命周期函数来分别添加和移除resize事件监听器：

mounted() {
  // 创建renderer
  this.renderer = new Three.WebGLRenderer({
    antialias: true
  })
  // 创建camera
  this.camera = new Three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

  // 添加resize事件监听器
  window.addEventListener('resize', this.resize)
  this.resize()
},
beforeDestroy() {
  // 移除resize事件监听器
  window.removeEventListener('resize', this.resize)
},

这样，当窗口大小改变时，resize方法会被调用，更新renderer的宽高，从而实现renderer根据屏幕自动刷新宽高。