如何在vue中使用threejs实现一个点击屏幕可以将模型自转停止的代码

下面是一个使用threejs实现点击屏幕自转和停止的例子：

<template>
  <div ref="container" @click="toggleRotation"></div>
</template>

<script>
import * as THREE from 'three'

export default {
  mounted() {
    this.init()
    this.animate()
  },
  methods: {
    init() {
      // 创建场景
      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({ antialias: true })
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      this.renderer.setClearColor('#000000')
      this.renderer.setPixelRatio(window.devicePixelRatio)

      // 将渲染器添加到 DOM 中
      this.$refs.container.appendChild(this.renderer.domElement)

      // 创建一个立方体
      const geometry = new THREE.BoxGeometry(1, 1, 1)
      const material = new THREE.MeshBasicMaterial({ color: '#ffffff' })
      this.cube = new THREE.Mesh(geometry, material)
      this.scene.add(this.cube)

      // 添加光源
      const light = new THREE.AmbientLight(0xffffff, 0.5)
      this.scene.add(light)

      // 添加一个方向光源
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
      directionalLight.position.set(1, 1, 1)
      this.scene.add(directionalLight)

      // 是否旋转
      this.isRotating = true
    },
    animate() {
      requestAnimationFrame(this.animate)
      this.renderer.render(this.scene, this.camera)

      if (this.isRotating) {
        this.cube.rotation.x += 0.01
        this.cube.rotation.y += 0.01
      }
    },
    toggleRotation() {
      this.isRotating = !this.isRotating
    },
  },
}
</script>

上面的代码中，我们在 `mounted` 钩子函数中调用了 `init` 方法来初始化场景、相机、渲染器、光源和模型，然后在 `animate` 方法中实现了模型的自转动画。

在模板中，我们使用了 `ref` 属性来获取容器元素，并在容器元素上添加了 `click` 事件监听器来切换自转状态。具体来说，我们通过 `toggleRotation` 方法来切换 `isRotating` 变量的值，从而实现停止自转和重新开始自转。