使threejs中的2d dom元素能够不影响轨道控制器使用

很多时候为了方便,我们会在3d环境中放置dom元素.这样的好处有很多,这里不多说明.
2d元素如何放到3d环境中可以参考
threejs-align-html-elements-to-3d.html

根据上面介绍我自己写了一个基类方便使用
https://github.com/aoobao/bim_test/blob/master/src/assets/js/BaseElement.js

接着碰到一个问题是: 我们希望鼠标在这些dom上时threejs中的轨道控制器的事件也能够响应,一开始找了半天没发现是什么地方阻止了事件传递,突然发现了大部分情况下我们是创建轨道控制器的时候,domelement是传递renderer.domElement的(就是canvas元素),而dom不会放在canvas内部
在这里只要把事件绑定在跟canvas一样大的父元素上,那些2d dom都放在父元素中就可以了.

// var orbitControls = new CameraControls(camera, renderer.domElement)

var orbitControls = new CameraControls(camera, container) // container 为和canvas一样大小的父节点,包裹其余2d元素