threejs在vue中加载gltf使用鼠标移动会导致页面卡顿，研究发现是因为数据双向绑定造成的，所以进行了调整。

<template>
  <div ref='canvasGLTF' class="canvasGLTF">
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

export default {
  name: 'GLTFCanvas',
  data () {
    return {
      list: []
    }
  },
  created: function () {

  },
  mounted: function () {
    var that = this
    var w = 1900
    var h = 822
    var model = 'assets/立库包装线 （新1）.gltf'
    var camera, scene, renderer
    var car
    var gltf_loader = new GLTFLoader()

// loop();

    function init () {
      // ------------------------------------ *** ---------------------------------------

      camera = new THREE.PerspectiveCamera(
          75,
          w / h,
          0.1,
          1000
      )
      camera.position.set(-13.448056849264857, 13.551140535225057, 6.181956428232634)
      scene = new THREE.Scene()
      renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
      })
      renderer.setPixelRatio(window.devicePixelRatio)
      renderer.setSize(w, h)
      renderer.outputEncoding = THREE.sRGBEncoding
      renderer.toneMappingExposure = -0.15
      // container.appendChild(renderer.domElement)
      that.$refs.canvasGLTF.appendChild(renderer.domElement)
      // LOAD MODEL
      gltf_loader.load(model, function (gltf) {
        car = gltf.scene
        gltf.scene.scale.set(1, 1, 1)
        // scene.add(gltf.scene);
        render()
      })

      var light = new THREE.PointLight(0xffffff, 2)
      light.position.set(100, 100, 100)
      scene.add(light)

      // VIEW CONTROLS
      const controls = new OrbitControls(camera, renderer.domElement)
      controls.addEventListener('change', render)
      controls.minDistance = 20
      controls.maxDistance = 70
      controls.target.set(0, 0.1, 0)
      controls.mouseButtons = {
        LEFT: THREE.MOUSE.ROTATE,
        MIDDLE: THREE.MOUSE.DOLLY,
        RIGHT: THREE.MOUSE.ROTATE,
      }
      // controls.minPolarAngle = 0;
      // controls.maxPolarAngle = Math.PI / 2;
      controls.update()
    }

    function loadModel (modelPath) {
      gltf_loader.load(modelPath, function (gltf) {
        scene.remove(car)
        var scale = 0.09
        car = gltf.scene
        gltf.scene.position.set(0, 8, 0)
        gltf.scene.rotation.set(-0.1, 0, 0)
        gltf.scene.scale.set(scale, scale, scale)
        scene.add(car)
        scene.traverse(function (child) {
          if (child.isMesh) {
            child.frustumCulled = false
            child.castShadow = true
            child.material.emissive = child.material.color
            child.material.emissiveMap = child.material.map
          }
        })
        render()
      })
    }

    function render () {
      renderer.render(scene, camera)
    }

    document.addEventListener('mousemove', function () {
      console.log(scene)
      console.log(camera)
    })
    init()
    loadModel(model)
  },
  methods: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.canvasGLTF {
  position: relative;
  width: 100%;
  height: calc(100% + 0px);
  margin-top: 0px;
}
</style>