vue中使用three.js加载3d模型，绑定 mouseup 和 mousedown 事件不起作用

vue中使用three.js加载3d模型，绑定 mouseup 和 mousedown 事件不起作用

在Three场景中，如果想要对鼠标进行操作就要引入OrbitControls.js文件，在这种控制方式下，鼠标左键为旋转视角，鼠标中键为拉伸视角，鼠标右键为平移视角。

js引入方式

<script src="../build/three.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>

vue引入方式

import * as THREE from 'three/build/three.module'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

但是vue引入后如果想要使用“mouseup” 和“ mousedown”事件 是不起作用的，而在js版本中就可以

js版本使用方法

document.addEventListener('mousedown', onDocumentMouseDown,false);
document.addEventListener('mouseup', onDocumentMouseUp,false);

function onDocumentMouseDown(e) {
  console.log("鼠标按下事件",e)
}
function onDocumentMouseUp(e) {
  console.log("鼠标抬起事件",e)
}

vue版本使用方法

//加入鼠标拖动对象的一系列监听事件
_this.renderer.domElement.addEventListener('pointerdown', _this.onDocumentMouseDown,false);
_this.renderer.domElement.addEventListener('pointerup', _this.onDocumentMouseUp,false);

onDocumentMouseDown(event) {
   event.preventDefault(); 
},
 onDocumentMouseUp(event) {
   event.preventDefault();
}

效果图：

这里之所以使用“pointerdown”和“pointerup”事件，是因为OrbitControls.js源码中没有定义“mousedown”和“mouseup”事件，而js版本中就定义了这两个事件（当然，也有可能是我文件版本的问题，具体的还要看文件的源码是否有这两个定义事件）

附上一段js版本源码

附上一段vue版本源码

这样一对比就很明显的知道了，可以简单粗暴理解为“起别名”，但实际并不是哦，大家有兴趣可以去看看“pointerdown”和“pointerup”事件的定义w3c-pointerdown事件地址就可以理解了，嘻嘻~