Javascript 三个JS拖动控件未捕获类型错误：无法设置属性'；x'；未定义的

所以我试着在场景中拖动球体。只要按下“m”键，拖动控制装置就会被激活。当前的问题是，每当我尝试拖动一个对象时，它都不会移动，我会得到“UncaughtTypeError:无法在HtmlCanvaseElement.onDocumentMouseMove处设置undefined的属性“x”。你们知道为什么会这样吗？（我尽量省略了问题代码中不必要的部分。如果看起来很凌乱，很抱歉）

从“vuex”导入{mapState，mapActions}；
从“三”中导入*作为三；
从“拖动控件”导入拖动控件；
var轨道控制=需要（“三轨道控制”）（三）；
var PLYLoader=需要（“三层装载机”）；
PLYLoader（三个）；
导出默认值{
名称：'ThreeTest'，
数据（）{
返回{
场景：空，
渲染器：null，
摄像机：空，
控件：null，
鼠标：新的3.Vector2（），
canvasPosition:null，
rayCaster:新的三个。rayCaster（），
球体：[]，
对象：[]，
莫维特：错，
plymap:null，
mapWidth:null，
mapHeight:null，
mapDimensions:null，
intersectsScene:null，
spoi:null
};
},
创建（）{
this.mapId=this.$route.params.mapId；
this.fetchMapData（this.mapId）；
this.plymap=this.MapStore.ply；
},
方法：{
init（）{
让map=document.getElementById（'map'）；
this.mapDimensions=map.getBoundingClientRect（）；
this.mapWidth=this.mapDimensions.width；
this.mapHeight=this.mapDimensions.height；
this.scene=新的三个.scene（）；
this.scene.background=新的三种颜色（0xF0）；
this.camera=新的3.perspective相机(
60,
this.mapWidth/this.mapHeight，
0.1,
1000,
);
这个.camera.position.z=3；
this.renderer=new THREE.WebGLRenderer（）；
this.renderer.setSize（this.mapWidth，this.mapHeight）；
appendChild（this.renderer.doElement）；
//事件侦听器：
map.addEventListener（'mousedown'，this.movePoi，false）；
document.addEventListener（'keydown'，this.onDocumentKeyDown，false）；
document.addEventListener（'keyup'，this.onDocumentKeyUp，false）；
},
//职能：
onDocumentKeyDown（事件）{
设keycode=event.which；
如果（键代码===77）{
this.moveIt=true；
this.controls.enabled=false；
}
},
onDocumentKeyUp（事件）{
设keycode=event.which；
如果（键代码===77）{
this.moveIt=false；
this.controls.enabled=true；
}
},
鼠始新世（事件）{
event.preventDefault（）；
让rect=event.target.getBoundingClientRect（）；
设x=event.clientX-rect.left；
设y=event.clientY-rect.top；
this.mouse.x=（x/this.mapWidth）*2-1；
this.mouse.y=-（y/this.mapHeight）*2+1；
this.rayCaster.setFromCamera（this.mouse，this.camera）；
},
//POI安置：
addNewPoi3d（事件）{
如果（事件）{
这是一个全新世（事件）；
};
event.preventDefault（）；
设球墨法=新的三个球墨法（0.1,32,32）；
设sphereMaterial=new THREE.MeshBasicMaterial（{color:0x00ff0}）；
设sphere=新的三个网格（球体测量法、球体材料）；
sphere.name='spherePOI'；
设intersects=this.intersectsScene；
intersects=this.rayCaster.intersectObject（this.scene.getObjectByName（'floor'））；
sphere.position.set(
相交[0]。点.x，
相交点[0]。点.y+球墨学.parameters.radius，
相交[0]。点.z
);
this.spheres.push（this.scene.getObjectByName（'spherePOI'）；
这个.objects.push（球体）；
this.scene.add（球体）；
},
//POI在场景周围的移动：
移动POI（事件）{
if（this.moveIt）{
这是一个全新世（事件）；
event.preventDefault（）；
设intersectsPoi=this.intersectsPoi；
intersectsPoi=this.rayCaster.intersectObject（this.scene.getObjectByName（'spherePOI'））；
console.log（intersectsPoi[0].object）；
console.log（intersectsPoi[0].object.name）；
if（intersectsPoi.length>0&&intersectsPoi[0].object.name==='spherePOI'）{
let controlsDrag=新的拖动控件（this.objects、this.camera、this.renderer.doElement）；
};
};
},
制作动画（）{
requestAnimationFrame（this.animate）；
这个。render（）；
},
render（）{
this.controls.update（）；
this.renderer.render（this.scene，this.camera）；
},
},
安装的（）{
this.init（）；
这个。动画（）；
},
};

预期：对象应该是可拖动的

---

实际：嗯，它们不是：D我得到了“未捕获类型错误：无法在HtmlCanvaseElement.onDocumentMouseMove设置未定义的属性'x”。

问题已经解决！我所需要做的就是将

DragControls.install（{THREE:THREE}）

添加到init（）阶段。

它似乎没有在THREE.DragControls模块中定义_鼠标。。。我想知道怎么才能做到这一点

<template>
  <div class="flex fill-height wrap">
    <div id="map"  class="flex fill-height wrap "  v-on:dblclick="addNewPoi3d" ></div>
  </div>
</template>
<script>

import { mapState, mapActions } from 'vuex';
import * as THREE from 'three';
import  DragControls from 'drag-controls';

var OrbitControls = require('three-orbit-controls')(THREE);

var PLYLoader = require('three-ply-loader');

PLYLoader(THREE);

export default {
  name: 'ThreeTest',
  data() {
    return {
      scene: null,
      renderer: null,
      camera: null,
      controls: null,
      mouse: new THREE.Vector2(),
      canvasPosition: null,
      rayCaster: new THREE.Raycaster(),
      spheres: [],
      objects: [],
      moveIt: false,
      plymap: null,
      mapWidth: null,
      mapHeight: null,
      mapDimensions: null,
      intersectsScene: null,
      intersectsPoi:null
    };
  },
  created() {
    this.mapId = this.$route.params.mapId;
    this.fetchMapData(this.mapId);
    this.plymap = this.MapStore.ply;
  },
  methods: {
    init() {
      let map = document.getElementById('map');
      this.mapDimensions = map.getBoundingClientRect();
      this.mapWidth = this.mapDimensions.width;
      this.mapHeight = this.mapDimensions.height;
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color( 0xf0f0f0 );
      this.camera = new THREE.PerspectiveCamera(
        60,
        this.mapWidth/this.mapHeight,
        0.1,
        1000,
      );
      this.camera.position.z = 3;

      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(this.mapWidth, this.mapHeight);
      map.appendChild(this.renderer.domElement);


      // EVENT LISTENERS:
      map.addEventListener('mousedown', this.movePoi, false);
      document.addEventListener('keydown', this.onDocumentKeyDown, false);
      document.addEventListener('keyup', this.onDocumentKeyUp, false);

    },

    // FUNCTIONS:
    onDocumentKeyDown(event) {

      let keycode = event.which;
      if (keycode === 77) {
        this.moveIt = true;
        this.controls.enabled = false;
      }
    },
    onDocumentKeyUp(event){
      let keycode = event.which;
      if (keycode === 77) {
        this.moveIt = false;
        this.controls.enabled = true;
      }
    },
    mouseOverScene (event) {
      event.preventDefault();
      let rect = event.target.getBoundingClientRect();
      let x = event.clientX - rect.left;
      let y = event.clientY - rect.top;

      this.mouse.x = ( x / this.mapWidth) * 2 - 1;
      this.mouse.y = - ( y / this.mapHeight ) * 2 + 1;

      this.rayCaster.setFromCamera(this.mouse, this.camera);
    },

    //POI placement:

    addNewPoi3d(event) {
      if (event) {
        this.mouseOverScene(event);
      };
      event.preventDefault();

      let sphereGeometry = new THREE.SphereGeometry( 0.1, 32, 32);
      let sphereMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff0 } );
      let sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
      sphere.name = 'spherePOI';

      let intersects = this.intersectsScene;
      intersects = this.rayCaster.intersectObject(this.scene.getObjectByName('floor'));

      sphere.position.set(
        intersects[0].point.x,
        intersects[0].point.y + sphereGeometry.parameters.radius,
        intersects[0].point.z
      );

      this.spheres.push(this.scene.getObjectByName('spherePOI'));
      this.objects.push(sphere);
      this.scene.add( sphere );


    },

    //POI movement around the scene:
    movePoi (event) {
      if (this.moveIt) {
        this.mouseOverScene(event);
        event.preventDefault();

      let intersectsPoi = this.intersectsPoi;
      intersectsPoi = this.rayCaster.intersectObject(this.scene.getObjectByName('spherePOI'));
      console.log(intersectsPoi[0].object);
      console.log(intersectsPoi[0].object.name);

      if (intersectsPoi.length > 0 && intersectsPoi[0].object.name === 'spherePOI') {
        let controlsDrag = new DragControls(this.objects, this.camera, this.renderer.domElement);
      };
      };
    },



    animate() {
      requestAnimationFrame(this.animate);
      this.render();
    },
    render() {
      this.controls.update();
      this.renderer.render(this.scene, this.camera);
    },
  },

  mounted() {
    this.init();
    this.animate();
  },
};
</script>